.custom-banner-carousel{position:relative}.custom-banner-carousel__title-row{display:flex;align-items:center;justify-content:space-between;gap:1.6rem}.custom-banner-carousel__nav{display:flex;gap:.8rem}.custom-banner-carousel__button{min-width:4.4rem;min-height:4.4rem}.custom-banner-carousel__button[name=previous] .svg-wrapper{transform:rotate(90deg)}.custom-banner-carousel__button[name=next] .svg-wrapper{transform:rotate(-90deg)}.custom-banner-carousel__viewport{overflow:hidden;width:100%}.custom-banner-carousel__track{--desktop-cols: 5;--mobile-cols: 2;--gap: 1.2rem;display:flex;gap:var(--gap);padding:0;margin:0;list-style:none;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.custom-banner-carousel__track::-webkit-scrollbar{display:none}.custom-banner-carousel__slide{min-width:0;flex:0 0 calc((100% - (var(--gap) * (var(--mobile-cols) - 1))) / var(--mobile-cols));width:calc((100% - (var(--gap) * (var(--mobile-cols) - 1))) / var(--mobile-cols));scroll-snap-align:start}.custom-banner-card{display:block;text-decoration:none;color:inherit}.custom-banner-card__media{overflow:hidden;border-radius:var(--media-radius);background:rgba(var(--color-foreground),.04)}.custom-banner-card__image,.custom-banner-card__placeholder{display:block;width:100%;height:auto;aspect-ratio:1 / 1;object-fit:cover}.custom-banner-card__content{padding-top:1.2rem}.custom-banner-card__title{margin:0 0 .8rem}.custom-banner-card__text{margin:0;color:rgba(var(--color-foreground),.75)}@media screen and (max-width:749px){.custom-banner-carousel__nav{display:none}}@media screen and (min-width:750px){.custom-banner-carousel__track{--gap: 2rem}.custom-banner-carousel__slide{flex:0 0 calc((100% - (var(--gap) * (var(--desktop-cols) - 1))) / var(--desktop-cols));width:calc((100% - (var(--gap) * (var(--desktop-cols) - 1))) / var(--desktop-cols))}}.custom-banner-carousel.is-start .custom-banner-carousel__button[name=previous],.custom-banner-carousel.is-end .custom-banner-carousel__button[name=next]{opacity:.4;pointer-events:none}.custom-banner-carousel__nav--mobile{display:none}@media screen and (max-width:749px){.custom-banner-carousel__title-row .custom-banner-carousel__nav{display:none}.custom-banner-carousel__nav--mobile{display:flex;justify-content:center;align-items:center;gap:1.2rem;margin-top:1.2rem;position:static;width:100%}.custom-banner-carousel__nav--mobile .custom-banner-carousel__button{position:static;transform:none;margin:0;flex:0 0 auto}}.custom-banner-carousel__dots{display:flex;justify-content:center;align-items:center;gap:.8rem;margin-top:1.6rem}.custom-banner-carousel__dot{appearance:none;-webkit-appearance:none;border:none;box-shadow:none;background:rgba(var(--color-foreground),.22);padding:0;margin:0;width:.9rem;height:.9rem;min-width:0;min-height:0;border-radius:50%;cursor:pointer;display:inline-block;flex:0 0 .9rem;line-height:1}.custom-banner-carousel__dot.is-active{background:rgba(var(--color-foreground),.75)}.custom-banner-carousel__dot:focus-visible{outline:.2rem solid rgba(var(--color-foreground),.35);outline-offset:.2rem}
/*# sourceMappingURL=/cdn/shop/t/4/assets/section-custom-banner-carousel.css.map */