# Hero #2

### Component Structure

**COPY WRAPPER (div)**: Serves as the top-level container for the hero section, encapsulating all its elements without any specific styling applied directly.

**HR2 SECTION (section)**: Acts as the main structural element of the hero component, with a CSS Class `hr2__component` applied to center the content and align items within the full viewport height.

**HR2 CONTAINER (container)**: A container within the section that further aligns and organizes the hero content, using the `hr2__container` class to center items.

**HR2 CONTENT (div)**: This div wraps the headline and button/text wrapper, employing a flex display to manage layout with responsiveness in mind, especially for tablet and mobile views.

**HR2 HEADLINE (heading)**: Displays the primary message of the hero section. It uses the `hr2__headline` class for styling and is an H1 tag, emphasizing its importance.

**HR2 WRAPPER (div)**: Contains the button and text elements, structured with flexbox to ensure proper alignment and spacing, adapting for mobile portrait orientations.

**HR2 BUTTON (button)**: A call-to-action button labeled "Button," styled with a `hr2__button` class, indicating its dark style and importance in mobile portrait order.

**HR2 TEXT (text-basic)**: Provides additional descriptive text using the `hr2__text` class to manage margins and maximum width for readability.

**HR2 IMAGE GRID (div)**: Organizes images in a grid layout, applying the `hr2__image-grid` class to define grid columns, gaps, and top margin adjustments.

**HR2 IMAGE WRAPPER and HR2 IMAGE (div and image)**: Multiple wrappers and image elements each using the `hr2__image-wrapper` and `hr2__image` classes respectively. These elements display various placeholder images, with specific classes (`hr2__down`, `hr2__up`) to manipulate their initial animation states.

### Animation Structure

**HR2 - Pageload (Timeline/Event)**: This timeline triggers animations for the hero component on page load, targeting elements with specific classes to animate properties such as opacity and vertical position. Key animations include:

**.hr2\_\_headline**: Animated to fade in and move up slightly, creating a welcoming effect for the headline.

**.hr2\_\_button**: Appears with a fade and upward movement, drawing attention shortly after the headline.

**.hr2\_\_text**: Fades in with a slight horizontal movement, adding to the sequential reveal of content.

**.hr2\_\_down and .hr2\_\_up**: These selectors target the image elements, animating them differently based on their class to create a layered effect, enhancing the visual appeal on page load.