.hero-banner{position:relative;width:100%}.hero-banner__main-splide .splide__slide{height:64rem}@media(min-width:750px)and (max-width:989px){.hero-banner__main-splide .splide__slide{height:48rem}}@media(max-width:749px){.hero-banner__main-splide .splide__slide{height:auto;aspect-ratio:16 / 9}}.hero-banner__slide-link{display:block;position:relative;width:100%;height:100%}.hero-banner__image,.hero-banner__placeholder{height:100%;width:auto;max-width:none;position:absolute;top:0;left:50%;transform:translate(-50%);display:block}@media(max-width:749px){.hero-banner__image{width:100%;height:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;transform:none}}.hero-banner__thumbnails{display:flex;justify-content:center;padding:1.2rem 1.5rem}@media(max-width:749px){.hero-banner__thumbnails{padding:.8rem 1rem}}.hero-banner__thumb-splide{width:100%}.hero-banner__thumb-slide{aspect-ratio:16 / 9;border-radius:4px;overflow:hidden;filter:grayscale(70%) brightness(.7);transition:filter .3s ease;cursor:pointer}.hero-banner__thumb-slide:hover{filter:grayscale(30%) brightness(.85)}.hero-banner__thumb-slide.is-active{filter:none}.hero-banner__thumb-image{width:100%;height:100%;object-fit:cover;display:block}.hero-banner__thumb-splide .splide__arrows{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:space-between;align-items:center;pointer-events:none;z-index:2}.hero-banner__thumb-splide .splide__track{margin:0 5.2rem}.hero-banner__thumb-splide .splide__arrow{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;border-radius:50%;background:rgba(var(--color-shadow-rgb),.3);color:rgb(var(--color-background-rgb));opacity:1;transition:background .2s ease;flex-shrink:0;cursor:pointer}.hero-banner__thumb-splide .splide__arrow:hover{background:rgba(var(--color-shadow-rgb),.5)}.hero-banner__thumb-splide .splide__arrow svg{fill:currentColor;width:14px;height:14px}@media(max-width:749px){.hero-banner__thumb-splide .splide__arrows{left:-.4rem;right:-.4rem}.hero-banner__thumb-splide .splide__track{margin:0 4rem}.hero-banner__thumb-splide .splide__arrow{width:32px;height:32px}}
/*# sourceMappingURL=/cdn/shop/t/4/assets/section-hero-banner.css.map */