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