.video-carousel{max-width:var(--page-width, 1200px);margin:0 auto;padding-left:1rem;padding-right:1rem}.video-carousel__heading{text-align:center;margin:0 0 1.5rem;font-weight:800}.video-carousel__wrapper{position:relative}.video-carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 1rem)/2);gap:1rem;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:.5rem}.video-carousel__track::-webkit-scrollbar{display:none}.video-carousel__slide{scroll-snap-align:start;scroll-snap-stop:always;position:relative}.video-carousel__media{position:relative;width:100%;aspect-ratio:9 / 16;border-radius:12px;overflow:hidden;background:#000}.video-carousel__video,.video-carousel__iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;border:0;pointer-events:none}.video-carousel__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#f4f4f4}.video-carousel__placeholder svg{width:60%;height:auto;opacity:.5}.video-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:#fffffff2;color:#111;box-shadow:0 2px 8px #0000002e;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:opacity .2s ease,transform .15s ease}.video-carousel__arrow:hover{transform:translateY(-50%) scale(1.05)}.video-carousel__arrow:disabled{opacity:0;pointer-events:none}.video-carousel__arrow svg{width:22px;height:22px}.video-carousel__arrow--prev{left:-6px}.video-carousel__arrow--next{right:-6px}.video-carousel__dots{display:flex;justify-content:center;gap:8px;margin-top:1rem}.video-carousel__dot{width:8px;height:8px;border-radius:50%;border:0;background:#c9c9c9;padding:0;cursor:pointer;transition:background-color .2s ease,transform .2s ease}.video-carousel__dot.is-active{background:#111;transform:scale(1.15)}@media screen and (min-width:750px){.video-carousel{padding-left:2rem;padding-right:2rem}.video-carousel__track{grid-auto-columns:calc((100% - 2rem) / 3);gap:1rem}.video-carousel__arrow{width:48px;height:48px}.video-carousel__arrow--prev{left:-12px}.video-carousel__arrow--next{right:-12px}}
/*# sourceMappingURL=/cdn/shop/t/7/assets/video-carousel.css.map */