.at-heroBanner {
    position: relative;
    width: calc(100% + 3rem);
    max-width: none;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    background: var(--eespa-primary);
    background: linear-gradient(90deg, rgba(21,41,75,1) 0%, var(--eespa-primary) 100%);
}

.pageBanner .at-heroBanner {
    margin-bottom: 0 !important;
}

.at-heroBanner::after {
    content: '';
    display: block;
    width: 100%;
    height: min(15vh, 125px);
    background: var(--baseLight200);
}

.at-heroBanner__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    height: 100%;
    padding-block: max(200px, calc(15vh + 100px)) max(100px, 15vh);
    padding-inline: 1.5rem;
    overflow: hidden;
    color: var(--baseLight100);
    z-index: 3;
}

.at-heroBanner__text {
    position: relative;
    z-index: 10;
    max-width: 70ch;
}

.at-heroBanner__title {
    font-size: clamp(1.7rem, 5vw, 64px);
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.50);
}

.at-heroBanner__introduction {
    max-width: 40ch;
    font-size: clamp(1.1rem, 2.5vw, 22px);
    font-weight: 600;
    color: #fff;
}

.at-heroBanner__image {
    position: absolute;
    right: -40vw;
    z-index: 1;
}

@media (min-width: 992px) {
    .at-heroBanner__inner {
        overflow: visible;
    }

    .at-heroBanner__image {
        right: 0;
        bottom: calc(-1 * min(15vh, 125px));
        max-width: 65%;
    }
}