.hero .hero-background-image {
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    width: 100%;
    background-size: cover;
    height: auto;
    aspect-ratio: 1980 / 715;
}

.hero .hero-background {
    display: grid;
    grid-template-areas: "homeHero";
}

.hero .hero-background > * {
    grid-area: homeHero;
    place-content: center;
}


.hero .hero-image-overlay {
    background-image: url('../svgs/home-hero-image-overlay.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;

}


.hero.animate .hero-image-overlay{
    opacity: 1;
    scale: 1;
}

.hero.page .hero-image-overlay {
    background-image: url('../svgs/l2-hero-background.svg');
    transform: translateX(-27rem);
}
.hero .hero-text-container {
    display: grid;
    grid-template-areas: "hero";
}



.hero .hero-text-container > * {
    grid-area: hero;
}
.hero .hero-text-container .hero-svg-overlay {
    background-image: url('../svgs/home-hero-background-texture.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    opacity: 0.85;
}


.hero .hero-text {
    background: var(--color-primary-white);
    padding: 4rem 12rem;
    border-radius: 1rem;
}

.hero.animate .hero-text{
    transform: translateY(-4rem);

}

.hero .hero-cta {
    color: var(--color-brand-blue);
    font-size: 2.3rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 600;
    justify-content: center;
    width: 100%;
}



@media screen and (max-width: 75em) {
    .hero .hero-text-container .hero-text {
        transform: none;
        max-width: 80%;
        margin-block: 4rem;
    }
}

@media screen and (max-width: 60em) {
    .hero .hero-headline.h2 {
        font-size: 3rem;
    }

    .hero .hero-text {
        padding: 2rem 4rem;
    }

}

@media screen and (max-width: 50em) {
    .hero .hero-headline.h2 {
        font-size: 2rem;
    }
}