.bas-art-shell {
    container-type: inline-size;
    width: 100%;
}

.bas-slider .bas-art {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1844 / 870;
    overflow: hidden;
    isolation: isolate;
    background: #172425;
    color: #182d28;
    text-decoration: none;
}

.bas-slider a.bas-art:focus-visible {
    outline: 3px solid #ffdc00;
    outline-offset: -4px;
}

.bas-slider .bas-art-layer {
    position: absolute;
    display: block;
    max-width: none;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    pointer-events: none;
}

.bas-slider .bas-art-background {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bas-art-product { left: -4.39%; top: 8.05%; width: 66.76%; }
.bas-art-logo { left: 56.94%; top: 15.63%; width: 13.67%; }
.bas-art-eyebrow { left: 56.78%; top: 29.2%; width: 10.96%; }
.bas-art-headline { left: 56.07%; top: 33.79%; width: 38.66%; }
.bas-art-cta { position: absolute; left: 64%; top: 61.84%; width: 19.88%; }
.bas-art-cta-text {
    display: grid;
    min-height: 10%;
    place-items: center;
    padding: 0.35em;
    border-radius: 0.22em;
    background: #bbc5a5;
    color: #182d28;
    text-align: center;
    font: 800 clamp(0.75rem, 1.4cqw, 1.75rem)/1.15 system-ui, sans-serif;
    text-transform: uppercase;
}

.bas-slider a.bas-art:hover .bas-art-cta,
.bas-slider a.bas-art:focus-visible .bas-art-cta { filter: brightness(1.14); }

.bas-custom .bas-art-shell {
    --bas-slot: var(--bas-desktop);
    display: grid;
    place-items: center;
    height: 100%;
}

.bas-custom .bas-art { width: min(100%, calc(var(--bas-slot) * 1844 / 870)); }

@media (max-width: 1024px) {
    .bas-custom .bas-art-shell { --bas-slot: var(--bas-tablet); }
}

@media (max-width: 767px) {
    .bas-custom .bas-art-shell { --bas-slot: var(--bas-mobile); }
}

/* Leave room for the carousel arrows at intermediate widths. */
@container (min-width: 621px) and (max-width: 1000px) {
    .bas-art-headline { width: 34.5%; }
}

@container (max-width: 620px) {
    .bas-slider .bas-art { aspect-ratio: 4 / 5; }
    .bas-custom .bas-art { width: min(100%, calc(var(--bas-slot) * 4 / 5)); }
    .bas-slider .bas-art-background { object-position: 36% 50%; }
    .bas-art::after {
        content: "";
        position: absolute;
        z-index: 1;
        inset: 43% 0 0;
        background: linear-gradient(transparent, #112122ed 43%, #112122);
        pointer-events: none;
    }
    .bas-art-product {
        left: -9%;
        top: 2.5%;
        width: 108%;
        mask-image: linear-gradient(#000 85%, transparent);
    }
    .bas-art-logo { left: 34%; top: 56%; width: 32%; z-index: 2; }
    .bas-art-eyebrow { left: 38%; top: 64.2%; width: 24%; z-index: 2; }
    .bas-art-headline { left: 7%; top: 69.1%; width: 86%; z-index: 2; }
    .bas-art-cta { left: 24%; top: 88%; width: 52%; z-index: 2; }
    .bas-art-cta-text { min-height: 9%; font-size: clamp(0.75rem, 4cqw, 1.15rem); }
}

/* The pause control is available even when there is only one banner. */
.bas-slider .bas-motion-toggle {
    position: absolute;
    z-index: 4;
    inset: 8px 8px auto auto;
    font-size: 13px;
    background: #15201f;
}

.bas-slider .bas-motion-toggle[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
    .bas-animating .bas-art > * {
        animation-duration: var(--bas-cycle);
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
    }

    .bas-animating .bas-art-background { animation-name: bas-landscape; }
    .bas-animating .bas-art-product { animation-name: bas-product; }
    .bas-animating .bas-art-logo { animation-name: bas-logo; }
    .bas-animating .bas-art-eyebrow { animation-name: bas-eyebrow; }
    .bas-animating .bas-art-headline { animation-name: bas-headline; }
    .bas-animating .bas-art-cta { animation-name: bas-cta-in; }
    .bas-motion-suspended .bas-animating .bas-art > * { animation-play-state: paused; }
    .bas-animating .bas-art:focus-visible > * { animation-name: none; }
}

@keyframes bas-landscape {
    0%, 100% { transform: scale(1.06); filter: brightness(.74); }
    22%, 86% { transform: scale(1); filter: brightness(1); }
}

@keyframes bas-product {
    0%, 3.5%, 100% { opacity: .08; transform: translate(-4%, 8%) scale(.97); }
    18%, 90% { opacity: 1; transform: none; }
}

@keyframes bas-logo {
    0%, 12%, 98%, 100% { opacity: 0; transform: translateY(min(17px, 3vw)); }
    20%, 89% { opacity: 1; transform: none; }
}

@keyframes bas-eyebrow {
    0%, 15%, 98%, 100% { opacity: 0; transform: translateY(min(17px, 3vw)); }
    23%, 88% { opacity: 1; transform: none; }
}

@keyframes bas-headline {
    0%, 17%, 97%, 100% { opacity: 0; transform: translateY(min(17px, 3vw)); }
    26%, 87% { opacity: 1; transform: none; }
}

@keyframes bas-cta-in {
    0%, 24%, 96%, 100% { opacity: 0; transform: translateY(10px) scale(.92); }
    32.5%, 88% { opacity: 1; transform: none; }
}