banner-carousel{display:block;position:relative;width:100%}.banner-carousel__viewport{position:relative;overflow:hidden}.banner-carousel__track{display:flex;width:100%;margin:0;padding:0;overflow-x:auto;overflow-y:hidden;aspect-ratio:var(--banner-carousel-desktop-ratio);scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.banner-carousel__track::-webkit-scrollbar{display:none}.banner-carousel__slide{position:relative;flex:0 0 100%;width:100%;height:100%;padding:0;scroll-snap-align:start;scroll-snap-stop:always}.banner-carousel__link,.banner-carousel__picture,.banner-carousel__placeholder{display:block;width:100%;height:100%}.banner-carousel__link{color:inherit;text-decoration:none}.banner-carousel__image,.banner-carousel__placeholder svg{display:block;width:100%;height:100%;object-fit:cover}.banner-carousel__placeholder{background:rgba(var(--color-foreground),.04)}.banner-carousel__arrow{position:absolute;z-index:2;top:50%;display:flex;align-items:center;justify-content:center;width:4.4rem;height:4.4rem;padding:0;border:0;border-radius:50%;color:rgb(var(--color-foreground));background:rgba(var(--color-background),.85);box-shadow:0 .2rem 1rem rgba(var(--color-shadow),.16);cursor:pointer;transform:translateY(-50%);transition:opacity .18s ease,background-color .18s ease}.banner-carousel__arrow:hover{background:rgb(var(--color-background))}.banner-carousel__arrow:focus-visible{outline:.2rem solid rgb(var(--color-foreground));outline-offset:.3rem}.banner-carousel__arrow--previous{left:1.6rem}.banner-carousel__arrow--next{right:1.6rem}.banner-carousel__arrow .svg-wrapper{width:1.4rem;height:1.4rem}.banner-carousel__arrow svg{width:100%;height:100%}.banner-carousel__arrow--previous svg{transform:rotate(90deg)}.banner-carousel__arrow--next svg{transform:rotate(-90deg)}@media screen and (min-width:750px){.banner-carousel__arrow{opacity:0;pointer-events:none}banner-carousel:hover .banner-carousel__arrow,banner-carousel:focus-within .banner-carousel__arrow{opacity:1;pointer-events:auto}}@media screen and (max-width:749px){.banner-carousel__track{aspect-ratio:1 / 1}.banner-carousel__arrow{width:3.8rem;height:3.8rem;background:rgba(var(--color-background),.72)}.banner-carousel__arrow--previous{left:.8rem}.banner-carousel__arrow--next{right:.8rem}}@media(prefers-reduced-motion:reduce){.banner-carousel__arrow{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/21/assets/banner-carousel.css.map */