.wrapper{--_pos:50%;max-block-size:100vb;max-block-size:100dvb;display:grid;margin-top:2rem;overflow:hidden;border-radius:1rem;position:relative;width:fit-content;margin-inline:auto}.wrapper>*{grid-area:1/-1}.wrapper .content{display:grid;place-content:center}.wrapper .content video{max-inline-size:100%;max-block-size:70.4vh;object-fit:cover}.wrapper .before{mask:linear-gradient(to right,#000 0,var(--_pos),#0000 0)}.wrapper .after{mask:linear-gradient(to right,#0000 0,var(--_pos),#000 0)}.slider-container{grid-area:1/-1;position:relative;z-index:5;pointer-events:none}.wrapper input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;width:100%;height:100%;pointer-events:auto}.wrapper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;inline-size:2px;block-size:100%;background-color:transparent;border:0}.wrapper input[type=range]::-moz-range-thumb{appearance:none;inline-size:2px;block-size:100%;background-color:transparent;border:0}.slider-handle{position:absolute;top:50%;left:var(--_pos);transform:translate(-50%,-50%);width:40px;height:40px;background:rgba(0,0,0,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;gap:8px;pointer-events:none;z-index:6}.slider-handle:before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:2px;height:100%;background:white;z-index:-1}