.section-hero-image-banner .hero-image-banner{--hero-image-banner-inset: 16px;--hero-image-banner-arrow-size: 32px;--hero-image-banner-ratio: var(--hero-image-banner-ratio-mobile);display:block;padding-block:var(--hero-image-banner-spacing-top) var(--hero-image-banner-spacing-bottom)}.section-hero-image-banner .hero-image-banner__container{position:relative;margin-inline:auto;overflow:hidden}.section-hero-image-banner .hero-image-banner__track{position:relative;display:flex;margin:0;padding:0;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}.section-hero-image-banner .hero-image-banner__track::-webkit-scrollbar{display:none}.section-hero-image-banner .hero-image-banner__slide{flex:0 0 100%;margin:0;scroll-snap-align:start;scroll-snap-stop:always}.section-hero-image-banner .hero-image-banner__media{display:block;aspect-ratio:var(--hero-image-banner-ratio);background-color:var(--COLOR-BG-ACCENT)}.section-hero-image-banner .hero-image-banner__media picture{display:contents}.section-hero-image-banner .hero-image-banner__image{display:block;width:100%;height:auto;object-fit:cover}.section-hero-image-banner .hero-image-banner__image--placeholder{fill:var(--COLOR-A35)}.section-hero-image-banner .hero-image-banner__arrow{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:var(--hero-image-banner-arrow-size);height:var(--hero-image-banner-arrow-size);padding:0;border:0;border-radius:50%;font-size:24px;cursor:pointer;transform:translateY(-50%);transition:opacity .2s ease}.section-hero-image-banner .hero-image-banner__arrow:hover{opacity:.85}.section-hero-image-banner .hero-image-banner__arrow--prev{left:var(--hero-image-banner-inset);color:var(--hero-image-banner-control);background-color:color-mix(in srgb,var(--hero-image-banner-control) 20%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.section-hero-image-banner .hero-image-banner__arrow--next{right:var(--hero-image-banner-inset);color:var(--hero-image-banner-control-contrast);background-color:var(--hero-image-banner-control)}.section-hero-image-banner .hero-image-banner__controls{position:absolute;right:var(--hero-image-banner-inset);bottom:var(--hero-image-banner-inset);z-index:2;display:flex;align-items:center;gap:16px}.section-hero-image-banner .hero-image-banner__indicators{display:flex;align-items:flex-end;gap:8px}.section-hero-image-banner .hero-image-banner__indicator{position:relative;width:12px;height:1px;padding:0;border:0;overflow:hidden;background-color:color-mix(in srgb,var(--hero-image-banner-control) 40%,transparent);cursor:pointer;transition:width .3s ease,height .3s ease}.section-hero-image-banner .hero-image-banner__indicator:before{content:"";position:absolute;top:-11px;right:-4px;bottom:-11px;left:-4px}.section-hero-image-banner .hero-image-banner__indicator.is-active{width:20px;height:2px}.section-hero-image-banner .hero-image-banner__indicator-progress{position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--hero-image-banner-control);transform:scaleX(0);transform-origin:left}.section-hero-image-banner .is-active .hero-image-banner__indicator-progress{transform:scaleX(1)}.section-hero-image-banner [data-autoplay] .is-active .hero-image-banner__indicator-progress{animation:hero-image-banner-progress var(--hero-image-banner-interval) linear forwards}.section-hero-image-banner .hero-image-banner.is-paused .hero-image-banner__indicator-progress,.section-hero-image-banner .hero-image-banner__container:hover .hero-image-banner__indicator-progress,.section-hero-image-banner .hero-image-banner__container:has(:focus-visible) .hero-image-banner__indicator-progress{animation-play-state:paused}.section-hero-image-banner .hero-image-banner__autoplay-toggle{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;background:none;color:var(--hero-image-banner-control);font-size:24px;cursor:pointer}.section-hero-image-banner .hero-image-banner__autoplay-icon--play,.section-hero-image-banner .is-paused .hero-image-banner__autoplay-icon--pause{display:none}.section-hero-image-banner .is-paused .hero-image-banner__autoplay-icon--play{display:contents}.section-hero-image-banner .hero-image-banner__arrow:focus-visible,.section-hero-image-banner .hero-image-banner__indicator:focus-visible,.section-hero-image-banner .hero-image-banner__autoplay-toggle:focus-visible,.section-hero-image-banner .hero-image-banner__media:focus-visible{outline:2px solid var(--hero-image-banner-control);outline-offset:2px}.section-hero-image-banner .hero-image-banner__media:focus-visible{outline-offset:-4px}.section-hero-image-banner .hero-image-banner--height-small .hero-image-banner__media,.section-hero-image-banner .hero-image-banner--height-medium .hero-image-banner__media,.section-hero-image-banner .hero-image-banner--height-large .hero-image-banner__media{aspect-ratio:auto}.section-hero-image-banner .hero-image-banner--height-small .hero-image-banner__media{height:320px}.section-hero-image-banner .hero-image-banner--height-medium .hero-image-banner__media{height:440px}.section-hero-image-banner .hero-image-banner--height-large .hero-image-banner__media{height:560px}@keyframes hero-image-banner-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@media screen and (min-width:750px){.section-hero-image-banner .hero-image-banner{--hero-image-banner-inset: 24px;--hero-image-banner-ratio: var(--hero-image-banner-ratio-desktop)}.section-hero-image-banner .hero-image-banner--height-small .hero-image-banner__media{height:360px}.section-hero-image-banner .hero-image-banner--height-medium .hero-image-banner__media{height:480px}.section-hero-image-banner .hero-image-banner--height-large .hero-image-banner__media{height:640px}}@media screen and (min-width:990px){.section-hero-image-banner .hero-image-banner{--hero-image-banner-arrow-size: 40px}.section-hero-image-banner .hero-image-banner__controls{right:40px}.section-hero-image-banner .hero-image-banner--height-small .hero-image-banner__media{height:420px}.section-hero-image-banner .hero-image-banner--height-medium .hero-image-banner__media{height:540px}.section-hero-image-banner .hero-image-banner--height-large .hero-image-banner__media{height:720px}}@media(prefers-reduced-motion:reduce){.section-hero-image-banner .hero-image-banner__track{scroll-behavior:auto}.section-hero-image-banner .hero-image-banner__indicator{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/54/assets/hero-image-banner.css.map */