.hero-banner{position:relative;width:100%;overflow:hidden;background-color:#111;box-sizing:border-box}.hero-banner__viewport{position:relative;width:100%;aspect-ratio:var(--hero-current-ratio, 16 / 9);max-height:var(--hero-max-height-desktop);overflow:hidden;transition:aspect-ratio .3s ease}.hero-banner__track{position:relative;width:100%;height:100%}.hero-banner__slide{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;visibility:hidden;pointer-events:none}.hero-banner__slide.is-active{visibility:visible;pointer-events:auto}.hero-banner--transition-fade .hero-banner__slide{opacity:0;transition:opacity .7s ease}.hero-banner--transition-fade .hero-banner__slide.is-active{opacity:1}.hero-banner--transition-slide .hero-banner__slide{transform:translate(100%);transition:transform .6s cubic-bezier(.65,0,.35,1),visibility .6s}.hero-banner--transition-slide .hero-banner__slide.is-active{transform:translate(0)}.hero-banner--transition-slide .hero-banner__slide.is-prev{transform:translate(-100%)}.hero-banner__media{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.hero-banner__image{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background-color:#111}.hero-banner__placeholder{width:100%;height:100%;background:#ddd}.hero-banner__placeholder-svg{width:100%;height:100%;object-fit:contain}.hero-banner__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,var(--slide-overlay-opacity, 0));pointer-events:none}.hero-banner__dots{position:absolute;left:50%;bottom:20px;transform:translate(-50%);z-index:3;display:flex;gap:10px}.hero-banner__dot{width:9px;height:9px;border-radius:50%;border:none;padding:0;background:var(--hero-dot-color);opacity:.55;cursor:pointer;transition:opacity .2s ease,transform .2s ease,background-color .2s ease}.hero-banner__dot:hover{opacity:.85}.hero-banner__dot.is-active{background:var(--hero-dot-active-color);opacity:1;transform:scale(1.2)}@media(max-width:749px){.hero-banner__viewport{max-height:var(--hero-max-height-mobile)}.hero-banner__dots{bottom:12px}}@media(prefers-reduced-motion:reduce){.hero-banner__slide,.hero-banner__dot,.hero-banner__viewport{transition:none!important}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/hero-banner.css.map */