.body{background-color:#363636}.wrapper{touch-action:none;-webkit-user-select:none;user-select:none;justify-content:center;width:100%;height:100vh;margin:auto;display:flex;position:relative;overflow:hidden}.draggable{width:100%;height:100%;position:static;top:96px}.box{aspect-ratio:319/405;text-align:center;z-index:1;cursor:pointer;will-change:transform;width:319px;font-size:25px;line-height:128px;transition:background-color .3s;position:absolute;top:0;left:0}.box__inner{width:100%;height:100%;position:relative}.box img{object-fit:cover;width:100%;height:100%}.box svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.box svg.play{cursor:pointer;pointer-events:auto;z-index:2}.wrapper.dragging .box{transition:none}.nav{text-align:center;color:#fff;margin:20px 0;font-size:20px;position:relative}.video-modal{z-index:9999;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.video-modal.is-open{display:flex}.video-modal__backdrop{cursor:pointer;background:#000000d9;position:absolute;inset:0}.video-modal__content{aspect-ratio:16/9;z-index:1;background:#000;border-radius:8px;width:90vw;max-width:960px;position:relative;overflow:hidden;box-shadow:0 20px 60px #00000080}.video-modal__content video,.video-modal__content iframe{border:none;width:100%;height:100%;display:block}.video-modal__content video.is-hidden,.video-modal__content iframe.is-hidden{display:none}.video-modal__close{color:#fff;cursor:pointer;z-index:2;background:#ffffff26;border:none;border-radius:50%;width:40px;height:40px;font-size:28px;line-height:1;transition:background .2s;position:absolute;top:12px;right:12px}.video-modal__close:hover{background:#ffffff4d}body.has-video-modal-open{overflow:hidden}@media (width<=1336px){.box{width:300px}}@media (width<=1036px){.box{width:250px}}@media (width<=767px){.box{width:200px}.video-modal__content{border-radius:6px;width:95vw}.video-modal__close{width:36px;height:36px;font-size:24px}}