.banner-hero {
    display: flex;
    width: 100%;
    max-width: 1512px; 
    height: fit-content;
    padding: var(--space-large);
    flex-direction: column;
    align-items: flex-start;
    background: var(--blue-50);
    margin: 0 auto; 
    overflow: hidden; 
    padding-top: var(--space-extra-large);
}

.image-hero {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    width: fit-content;
}

.text {
    max-width: 560px;
}

.margin-top {
    margin-top: var(--space-large);
}

.margin-bottom {
    margin-bottom: var(--space-large);
}

.img-info {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}


.image-example {
    padding-top: var(--space-medium);
    width: 80%;
    height: auto;
}

/* ------------------------------------------------------ VARIABLES ------------------------------------------------------ */
:root {
    /* ----- COLORS ----- */
    --blue-primary: rgb(43,95,252);
    --blue-50: rgb(234, 239, 255);
    --blue-900: rgb(18, 40, 106);
    
    --white: #FFFFFF;
    --black: rgb(20, 20, 20);
    --grey-400: rgb(67, 67, 67);

    --yellow-secondary: rgb(255, 218, 1);
    --orange-secondary: rgb(255, 94, 9);
    --green-secondary: rgb(0, 193, 79);
    --purple-secondary: rgb(154, 65, 255);

    /* ----- TYPE ----- */
    --font-family: "Open Sans", sans-serif;
    --header-xxlarge-size: 88px;
    --title-section-font-size: 30px;
    --button-font-size: 24px;
    --body-text-font-size: 20px;
    --menu-font-size: 16px;
    --label-font-size: 16px;
    --font-style-normal: normal;
    --font-weight-700: 700;
    --font-weight-600: 600;
    --font-weight-400: 400;
    --menu-text-hover-font-weight: 700;
    --line-height-xxlarge: 100px;
    --line-height-large: 36px;
    --line-height-medium: 28px;
    --line-height-small: 20px;

    /* ----- SPACING ----- */
    --space-small: 8px;
    --space-regular: 16px;
    --space-medium: 32px;
    --space-large: 48px;
    --space-extra-large: 140px;
}