/* HERO L2 */
.hero-container.l2 {
    display: grid;
    grid-template-areas: "hero";
}

.hero-container.l2 .hero-wrap {
    margin: 0;
}

.hero-container.l2 > * {
    grid-area: same;
}

.hero-container.l2 .hero-img {
    min-height: 35rem;
    max-height: 35rem;
    width: 100dvw;
    object-fit: cover;
}

.hero-container.l2 .hero-mobile-img {
    display: none;
}

.hero-container.l2 .hero-text {
    grid-column: 2 / 4;
    margin-block: auto;
}

.hero-container.l2 .hero-text h1 {
    font-size: 7.2rem;
}

.hero-container.l2 .hero-text {
    grid-column: 1 / 3;
}

.hero-container.l2.headline-color-white h1,
.hero-container.l2.sub-headline-color-white h3 {
    color: var(--color-primary-white);
}

.hero-container.l2.headline-color-gray h1,
.hero-container.l2.sub-headline-color-gray h3 {
    color: var(--color-gray-dark);
}

.hero-container.l2.headline-color-navy h1,
.hero-container.l2.sub-headline-color-navy h3 {
    color: var(--color-brand-navy);
}

.hero-container.l2 .hero-text h3 {
    font-size: 2.4rem;
    font-weight: 400;
    margin: 0;
}

.hero-container.l2 svg {
    width: 18rem;
    height: 18.5rem;
    position: relative;
    z-index: 5;
    grid-area: same;
    display: flex;
    align-self: flex-end;
    margin-left: 4rem;
    top: 5rem;
}

.hero-container.l2 .hero-text a.button.blue-on-orange {
    margin-top: 2rem;
}

h6.member-since {
    position: relative;
    align-self: flex-end;
    justify-self: flex-end;
    color: var(--color-primary-white);
    font-weight: 500;
    font-style: italic;
    top: -6rem;
    margin-right: 9vw;
    font-size: 1.2rem;
    grid-area: same;
    object-fit: cover;
    padding-inline: 1rem;
    background: var(--color-gray-dark);
}

@media screen and (max-width: 104em) {
    .hero-container.l2 svg {
        display: none;
    }
}

@media screen and (max-width: 70em) {
    h6.member-since {
        margin-right: 2vw;
    }
}

@media screen and (max-width: 45rem) {
    h6.member-since {
        display: none;
    }

    .hero-container.l2 .hero-img {
        display: none;
    }

    .hero-container.l2 .hero-mobile-img {
        display: block;
        min-height: 18rem;
        object-fit: cover;
    }

    .hero-container.l2 .hero-text h3 {
        font-size: 2.2rem;
    }
}