.column-spacing--small{--gap: 8px}.column-spacing--medium{--gap: 12px}.column-spacing--large{--gap: 20px}@media only screen and (min-width:768px){.column-spacing--small{--gap: 10px}.column-spacing--medium{--gap: 14px}.column-spacing--large{--gap: 24px}}.media-grid{margin-top:28px;margin-bottom:28px}.media-grid.no-top-space{margin-top:16px}.media-grid.no-bottom-space{margin-bottom:16px}.media-grid--slider{position:relative}.media-grid--arrow{-webkit-appearance:none;appearance:none;border:none;padding:0;background:none;cursor:pointer;position:absolute;top:50%;transform:translateY(-58%);z-index:30;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#ffffff1f;border:1.5px solid rgba(255,255,255,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .35s cubic-bezier(.34,1.56,.64,1),background .25s ease,border-color .25s ease,box-shadow .25s ease}.media-grid--arrow[data-state=visible]{opacity:1;pointer-events:auto}.media-grid--arrow[data-state=hidden]{opacity:0;pointer-events:none}.media-grid--arrow[data-state=visible]:hover{background:#ffffff47;border-color:#ffffffb3;box-shadow:0 0 0 4px #ffffff14,0 4px 20px #00000026;transform:translateY(-58%) scale(1.1)}.media-grid--arrow:active{transform:translateY(-58%) scale(.93)!important;transition-duration:.1s}.media-grid--arrow svg{width:18px;height:18px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));flex-shrink:0}.media-grid--arrow-prev{left:12px}.media-grid--arrow-next{right:12px}.media-grid--track:not([style*=overlay]) .media-grid--arrow svg,.media-grid--arrow.on-light svg{color:#1a1a1a;filter:none}.media-grid--slider:before,.media-grid--slider:after{content:"";position:absolute;top:0;bottom:14px;width:64px;z-index:20;pointer-events:none;transition:opacity .35s ease}.media-grid--slider:before{left:0;background:linear-gradient(to right,rgba(255,255,255,.6) 0%,transparent 100%)}.media-grid--slider:after{right:0;background:linear-gradient(to left,rgba(255,255,255,.6) 0%,transparent 100%)}.media-grid--slider:has(.media-grid--arrow-prev[data-state=hidden]):before{opacity:0}.media-grid--slider:has(.media-grid--arrow-next[data-state=hidden]):after{opacity:0}.media-grid--track{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;gap:var(--gap, 12px);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding:0 16px 14px;box-sizing:border-box;transition:justify-content 0s}.media-grid--track::-webkit-scrollbar{display:none}.media-grid--track.is-centered{justify-content:center;scroll-snap-type:none;overflow-x:visible}.media-grid--track-full-width-row,.media-grid--track-full-width-row-full{padding-left:20px;padding-right:20px}.media-grid--track-full-width-row-full{padding-left:0;padding-right:0}.media-grid--track.single-landscape{overflow-x:visible;scroll-snap-type:none;flex-wrap:wrap;justify-content:center}.media-grid--track.single-landscape .media-grid--item{width:100%;flex-shrink:1;scroll-snap-align:none}.media-grid--track.single-landscape .media-grid--aspect-wrapper{aspect-ratio:16 / 9}.media-grid--slider:has(.single-landscape) .media-grid--arrow{display:none!important}.media-grid--slider:has(.single-landscape):before,.media-grid--slider:has(.single-landscape):after{display:none}.media-grid--item{flex-shrink:0;scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(18px) scale(.97);transition:opacity .55s cubic-bezier(.4,0,.2,1),transform .55s cubic-bezier(.34,1.3,.64,1)}.media-grid--item:nth-child(1){transition-delay:0s}.media-grid--item:nth-child(2){transition-delay:.06s}.media-grid--item:nth-child(3){transition-delay:.12s}.media-grid--item:nth-child(4){transition-delay:.18s}.media-grid--item:nth-child(5){transition-delay:.24s}.media-grid--item:nth-child(6){transition-delay:.3s}.media-grid--item:nth-child(7){transition-delay:.06s}.media-grid--item:nth-child(8){transition-delay:.12s}.media-grid--item:nth-child(9){transition-delay:.18s}.media-grid--item:nth-child(10){transition-delay:.24s}.media-grid--item.mg-visible{opacity:1;transform:translateY(0) scale(1)}.media-grid--card{position:relative;border-radius:14px;overflow:hidden;background:var(--color-bg-gradient, var(--bg-body, #f1f1f1));transition:transform .38s cubic-bezier(.23,1,.32,1),box-shadow .38s cubic-bezier(.23,1,.32,1)}.media-grid--item.has-link--true .media-grid--card:hover{transform:translateY(-5px);box-shadow:0 16px 40px #00000024}.media-grid--aspect-wrapper{position:relative;width:100%;overflow:hidden}.media-grid--bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.media-grid--bg img,.media-grid--bg video{width:100%;height:100%;object-fit:cover;display:block;animation:mg-media-in .8s cubic-bezier(.4,0,.2,1) both}@keyframes mg-media-in{0%{transform:scale(1.04);opacity:.8}to{transform:scale(1);opacity:1}}.media-grid--overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background:rgba(var(--overlay-color-rgb, 0,0,0),var(--overlay-opacity, 0));pointer-events:none}.media-grid--content{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;flex-direction:column;padding:14px}.content-top-left .media-grid--content{justify-content:flex-start;align-items:flex-start}.content-top-center .media-grid--content{justify-content:flex-start;align-items:center}.content-top-right .media-grid--content{justify-content:flex-start;align-items:flex-end}.content-middle-left .media-grid--content{justify-content:center;align-items:flex-start}.content-middle-center .media-grid--content{justify-content:center;align-items:center}.content-middle-right .media-grid--content{justify-content:center;align-items:flex-end}.content-bottom-left .media-grid--content{justify-content:flex-end;align-items:flex-start}.content-bottom-center .media-grid--content{justify-content:flex-end;align-items:center}.content-bottom-right .media-grid--content{justify-content:flex-end;align-items:flex-end}.media-grid--link{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10}.media-grid--item .badge{position:absolute;left:10px;top:10px;z-index:5}.media-grid--caption{padding:0 2px}.media-grid--caption-name{margin:0 0 2px;font-weight:600;font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;color:var(--color-body, #252525);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.media-grid--caption-text{margin:0;font-size:.78rem;color:var(--color-body, #252525);opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.media-grid--video-desktop{display:none}@media only screen and (min-width:768px){.media-grid--video-desktop{display:block}}.media-grid--video-mobile{display:block}@media only screen and (min-width:768px){.media-grid--video-mobile{display:none}}@media only screen and (max-width:767px){.media-grid--track{scroll-padding-left:16px}.mobile-ratio--9-16{width:calc((100vw - 32px - var(--gap, 12px)) / 2)}.mobile-ratio--9-16 .media-grid--aspect-wrapper{aspect-ratio:9 / 16;height:auto}.mobile-ratio--16-9{width:calc(100vw - 32px)}.mobile-ratio--16-9 .media-grid--aspect-wrapper{aspect-ratio:16 / 9;height:auto}.media-grid--track-full-width-row-full .mobile-ratio--9-16{width:calc((100vw - var(--gap, 12px)) / 2)}.media-grid--track-full-width-row-full .mobile-ratio--16-9{width:100vw}.media-grid--arrow{width:36px;height:36px}.media-grid--arrow svg{width:14px;height:14px}.media-grid--arrow-prev{left:4px}.media-grid--arrow-next{right:4px}}@media only screen and (min-width:768px){.media-grid--track{scroll-padding-left:20px}.desktop-ratio--9-16{width:calc((100vw - 40px - 5 * var(--gap, 14px)) / 6)}.desktop-ratio--9-16 .media-grid--aspect-wrapper{aspect-ratio:9 / 16;height:auto}.desktop-ratio--16-9{width:calc(100vw - 40px);flex-shrink:0}.desktop-ratio--16-9 .media-grid--aspect-wrapper{aspect-ratio:16 / 9;height:auto}.media-grid--track-grid .desktop-ratio--9-16{width:calc((min(1440px,100vw) - 100px - 5 * var(--gap, 14px)) / 6)}.media-grid--track-full-width-row-full .desktop-ratio--9-16{width:calc((100vw - 5 * var(--gap, 14px)) / 6)}.media-grid--track-full-width-row-full .desktop-ratio--16-9{width:100vw}.media-grid--arrow{width:48px;height:48px}.media-grid--arrow-prev{left:14px}.media-grid--arrow-next{right:14px}}
/*# sourceMappingURL=/cdn/shop/t/60/assets/media-grid.css.map */