.video-modal{--aspect-ratio:16/9;--max-height: calc(100vh - 60px) ;position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:center;width:100vw;height:100vh;background:#000000b3}.video-modal.hidden{display:none}.video-modal-inner{width:100%;max-width:850px;max-height:100%;margin:0 15px;overflow:auto}.video-modal-wrapper{position:relative;z-index:101;width:calc(var(--max-height) * var(--aspect-ratio));max-width:100%;background:var(--white);padding:4px;margin:30px auto 0}.video-modal-content{position:relative;max-height:var(--max-height);aspect-ratio:var(--aspect-ratio)}.video-modal-content video{position:absolute;width:100%;height:100%;top:0;right:0;bottom:0;left:0}.video-modal-close{position:absolute;bottom:calc(100% + 5px);right:0;display:flex;align-items:center;justify-content:center;width:25px;height:25px;text-align:center;font-size:22px;line-height:23px;color:var(--white);cursor:pointer}.video-modal-close:active{color:var(--primary-color)}.videos-row-inner{--header-bottom-gap:41px;--slider-bottom-gap:55px;padding:77px 0 70px}.videos-header{--titles-gap:26px}.videos-title+.videos-subtitle{margin-top:14px}.videos-slider-container{--slides-width:clamp( 200px, calc( 200px + (300 - 200) * ( (100vw - 1020px) / (1405 - 1020) ) ), 300px );--slides-to-show:4;--gaps:12px;--container-width:calc(var(--slides-width) * var(--slides-to-show) + var(--gaps) * (var(--slides-to-show) - 1));position:relative}.videos-slider-container-3{--slides-to-show:3}.videos-slider-container-2{--slides-to-show:2}.videos-slider-container-1{--slides-to-show:1}.videos-slider{width:var(--container-width)}.videos-slider-inner{width:max-content}.videos-slide{position:relative;width:var(--slides-width);min-width:200px;margin-right:var(--gaps);overflow:hidden;cursor:pointer}.videos-slide img{transform:scale(1);transition:transform .3s ease-out}.videos-slide:last-child{margin-right:0}.videos-image-container{position:relative;aspect-ratio:300/508}.videos-image-container img{width:100%;height:100%;object-fit:cover}.videos-icon-play,.videos-image-container img{position:absolute;top:0;right:0;bottom:0;left:0}.videos-icon-play{--size:clamp( 55px, calc( 55px + (75 - 55) * ( (100vw - 1020px) / (1405 - 1020) ) ), 75px );width:var(--size);height:var(--size);margin:auto;pointer-events:none}.videos-icon-play svg{width:100%;height:auto}.videos-arrows{--offset:38px;--arrow-size:16px;--calculated-offset:var(--container-width)/2}.videos-arrow{--button-background-color:var(--denary-color);position:absolute;transform:translateY(-50%);width:auto;height:auto;margin-top:0;color:var(--text-black)}.videos-arrow svg{width:var(--arrow-size);height:auto}.videos-arrow.swiper-button-lock{display:none}.videos-arrow:active{transform:translateY(-50%) scale(1.1)}.videos-arrow.next{right:calc(50% - (var(--calculated-offset) + var(--arrow-size) + var(--offset)))}.videos-arrow.prev{left:calc(50% - (var(--calculated-offset) + var(--arrow-size) + var(--offset)))}.videos-arrow.swiper-button-disabled{opacity:1;color:var(--disabled-grey)}.videos-footer{text-align:center}.videos-header+.videos-footer,.videos-header+.videos-slider-container{margin-top:var(--header-bottom-gap)}.videos-slider-container+.videos-footer{margin-top:var(--slider-bottom-gap)}@media(max-width:1439px){.videos-arrows{--offset:20px}}@media(max-width:966px){.videos-slider-container-4{--slides-width:clamp( 200px, calc( 200px + (230 - 200) * ( (100vw - 834px) / (966 - 834) ) ), 230px )}.videos-slider-container-4 .videos-slider{width:auto;padding-left:18px;padding-right:18px}.videos-slider-container-4 .videos-arrows{display:none}}@media(max-width:680px){.videos-row-inner{--header-bottom-gap:34px;--slider-bottom-gap:28px;padding:68px 0 61px}}@media(max-width:660px){.videos-slider-container-3{--slides-width:clamp( 200px, calc(200px + .1*(100vw - 360px)) , 230px )}.videos-slider-container-3 .videos-slider{width:auto;padding-left:18px;padding-right:18px}.videos-slider-container-3 .videos-arrows{display:none}}@media(max-width:448px){.videos-slider-container-2{--slides-width:clamp( 200px, calc( 200px + (230 - 200) * ( (100vw - 360px) / (448 - 360) ) ), 230px )}.videos-slider-container-2 .videos-slider{width:auto;padding-left:18px;padding-right:18px}.videos-slider-container-2 .videos-arrows{display:none}}@media(hover:hover){.video-modal-close:hover{color:var(--primary-color)}.videos-slide:hover img{transform:scale(1.05)}.videos-arrow:hover{transform:translateY(-50%) scale(1.1)}}
/*# sourceMappingURL=/cdn/shop/t/40/assets/css-videos.css.map */