.at-heroBanner {
    position: relative;
    margin-top: calc(-1 * clamp(6.5rem, 18vw, 11rem));
    z-index: 0;
    overflow: hidden;
}

.at-heroBanner.--center .at-heroBanner__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.at-heroBanner.--center .at-heroBanner__title {
    text-align: center;
}

.at-heroBanner::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    background-color: rgba(0, 0, 0, .25);
    z-index: 2;
}

.at-heroBanner__inner {
    position: relative;
    z-index: 3;
    padding-block: clamp(200px, 26vh, 26vw);
    color: var(--baseLight100);
}

.at-heroBanner__inner.--large {
    padding-block: clamp(200px, 40vh, 30vw);
}

.at-heroBanner__title {
    max-width: 88%;
    margin-bottom: 0;
    line-height: 1;
    font-weight: normal;
    font-family: var(--proximaRegular);
    text-shadow: 1px 1px 10px #000;
    color: var(--baseLight100);
}

.at-heroBanner__title strong {
    font-family: var(--proximaBold);
}

.at-heroBanner__title + .at-heroBanner__link {
    margin-top: var(--margin);
}

.at-heroBanner__image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Video wrapper
 */

.at-heroBanner__videoWrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: clip;
    container-name: videoWrapper;
    container-type: size;
}

.at-heroBanner__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

.at-heroBanner__video,
.at-heroBanner__video > iframe {
    position: relative;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none !important;
    pointer-events: none;
}

.at-heroBanner__video iframe {
    border: none;
}

@container videoWrapper (aspect-ratio >= 16/9) {
    .at-heroBanner__video {
        height: 300% !important;
        top: -100%;
    }
}

@container videoWrapper (aspect-ratio < 16/9) {
    .at-heroBanner__video {
        width: 500%;
        left: -200%;
        height: calc(100% + 100px) !important;
        top: -50px;
    }
}