.header.--fixed + .main .at-videoBanner.--fullwidth:first-of-type {
    padding-top: max(var(--articlePadding), var(--headerHeight));
}

.at-videoBanner.--hasBackground {
    position: relative;
}

.at-videoBanner__inner {
    position: relative;
    padding-block: var(--marginMedium);
    padding-inline: var(--pageGutter);
}

.aside .at-videoBanner__inner {
    padding-inline: var(--marginMedium);
}

.at-videoBanner.--fullwidth:not(.--hasBackground) .at-videoBanner__inner {
    padding-inline: 0;
}

.at-videoBanner.--hasBackground.--fullwidth .g-container__inner {
    max-width: var(--maxBreakoutWidth);
}

.at-videoBanner.--hasBackground.--fullwidth .at-videoBanner__inner {
    position: static;
    padding-block: 0;
}

.at-videoBanner.--light .articleTitle,
.at-videoBanner__inner.--light *:not(.ctaButton),
.at-videoBanner__inner.--light .ctaButton.--ghost {
    color: var(--baseLight100);
}

.at-videoBanner__contentWrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    z-index: 10;
}

.at-videoBanner__contentWrapper.--isCenterAligned {
    justify-content: center;
    align-items: center;
    text-align: center;
}

.at-videoBanner__title:not(:only-child) {
    margin-bottom: 1.2rem;
}

.at-videoBanner__title {
    max-width: 20ch;
}

.at-videoBanner__text {
    max-width: clamp(10px, 52ch, 766px);
}

.at-videoBanner__text:has( + .u-buttonWrapper) {
    margin-bottom: var(--marginMedium);
}

/**
 * Button wrapper
 */

.at-videoBanner__contentWrapper.--isCenterAligned .u-buttonWrapper {
    justify-content: center;
}

/*
 * Video wrapper
 */

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

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

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

.at-videoBanner__video iframe {
    border: none;
}

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

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

/** With overlay */
.at-videoBanner__videoWrapper.--hasOverlay .at-videoBanner__video.--grayscale {
    filter: grayscale(1);
}

.at-videoBanner__videoWrapper.--hasOverlay::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
}

/** Not fullwidth */
.Article:not(.--fullwidth) .at-videoBanner__inner {
    overflow: clip;
    border-radius: var(--borderRadiusSmall);
}