:root{--image-comparison-slider-width:min(80vw,768px);--image-comparison-slider-handle-width:50px}.body{align-items:center;box-sizing:border-box;display:flex;justify-content:center;margin:auto;min-height:100vh;padding:0;width:500px}#image-comparison-slider{border-radius:.5rem;box-shadow:-7px 5px 16px 1px rgba(56,86,122,.6);cursor:col-resize;overflow:hidden;position:relative}#image-comparison-slider,#image-comparison-slider img{margin:auto;width:var(--image-comparison-slider-width)}#image-comparison-slider img{display:block;height:auto;max-height:80vh;object-fit:cover;pointer-events:none;user-select:none}#image-comparison-slider .img-wrapper{height:100%;overflow:hidden;position:absolute;right:0;top:0;transform:translateZ(0);width:50%;z-index:1}#image-comparison-slider .img-wrapper img{margin:auto;position:absolute;right:0;top:0}#image-comparison-slider .label{background-color:rgba(0,0,0,.33);border-radius:.25rem;color:#fff;font-size:2vmin;letter-spacing:1px;opacity:0;padding:.5rem .75rem;position:absolute;text-align:center;top:1rem;transition:.25s cubic-bezier(.68,.26,.58,1.22);user-select:none;z-index:3}#image-comparison-slider:hover .label{opacity:1}#image-comparison-slider .label.label-before{background-color:#101820;left:1rem}#image-comparison-slider .label.label-after{background-color:#0842fa;right:1rem}#image-comparison-slider .handle{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;left:calc(50% - var(--image-comparison-slider-handle-width)/2);position:absolute;top:0;user-select:none;width:var(--image-comparison-slider-handle-width);z-index:2}#image-comparison-slider .handle-line{background-color:#fff;flex-grow:1;width:2px}#image-comparison-slider .handle-circle{align-items:center;border:2px solid #fff;border-radius:50%;color:#fff;display:flex;height:var(--image-comparison-slider-handle-width);justify-content:space-evenly;width:var(--image-comparison-slider-handle-width)}@media screen and (max-width:768px){:root{--image-comparison-slider-width:90vw}}