.c-hero{--c-hero-slide: 58.9744vw;--c-hero-gap: var(--c-space-10);--c-hero-dots-gap: var(--c-space-10);--c-hero-dot-inset: 9px;box-sizing:border-box;padding:0 0 calc(var(--c-space-12) - var(--c-hero-dot-inset));background-color:var(--c-color-bg)}@media only screen and (min-width:769px){.c-hero{--c-hero-slide: min(27.4286vw, 411px);--c-hero-gap: var(--c-space-24);--c-hero-dots-gap: var(--c-space-8);padding:var(--c-space-32) 0 0}}.c-hero__list{position:relative;display:flex;gap:var(--c-hero-gap);margin:0;padding:0;overflow-x:auto;overscroll-behavior-x:contain;list-style:none;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}.c-hero__list::-webkit-scrollbar{display:none}.c-hero__list:before,.c-hero__list:after{content:"";flex:0 0 calc((100% - var(--c-hero-slide)) / 2 - var(--c-hero-gap))}html[class~=js] .c-hero[data-custom-hero-unplaced] .c-hero__list:before{margin-left:calc(-1 * var(--c-hero-clones, 0) * (var(--c-hero-slide) + var(--c-hero-gap)))}html[class~=no-js] .c-hero__slide[data-custom-hero-clone]{display:none}.c-hero__slide{position:relative;flex:0 0 var(--c-hero-slide);margin:0;scroll-snap-align:center}.c-hero__link{display:block;color:var(--c-color-text);text-decoration:none}.c-hero__link:focus-visible{outline:2px solid var(--c-color-text);outline-offset:-2px}.c-hero__media{aspect-ratio:4 / 5;overflow:hidden;background-color:var(--c-color-bg-subtle)}.c-hero__image,.c-hero__placeholder{display:block;width:100%;height:100%;object-fit:cover}.c-hero__caption{margin:var(--c-space-8) 0 0;color:var(--c-color-text);font-size:var(--c-fs-11);font-weight:var(--c-fw-regular);line-height:1.2}.c-hero__heading,.c-hero__body{display:block}@media only screen and (max-width:768px){.c-hero__caption{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}}@media only screen and (min-width:769px){.c-hero__caption{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}.c-hero__dots{margin-top:calc(var(--c-hero-dots-gap) - var(--c-hero-dot-inset))}.c-hero__dots .c-dots{max-width:100%}.c-hero__dots button.c-dots__dot{flex:0 1 24px;min-width:0}.c-hero__dots button.c-dots__dot[aria-current=true]{flex-basis:32px}@media screen and (pointer:fine){.c-hero__image{transition:opacity var(--c-duration)}.c-hero__link[href]:hover .c-hero__image{opacity:.85}}
/*# sourceMappingURL=/cdn/shop/t/198/assets/custom-hero.css.map */