.image-compare__wrapper{--position-x:50%;--compare-width:5px;--dragger:122px;--max-width:1170px;--size:16/9;background-color:var(--white);border-radius:25px;box-shadow:0 3px 14px rgba(96,96,96,.16);margin-top:40px;margin-inline:auto;max-width:var(--max-width);overflow:hidden;padding:0;position:relative;width:fit-content;width:100%;z-index:2}.image-compare__icon{color:#a2a2a2;left:50%;position:relative;transform:translateX(-50%)}.image-compare__front{aspect-ratio:var(--size);display:block;vertical-align:top}.image-compare__back,.image-compare__front{background-color:#fff;object-fit:cover;width:100%}.image-compare__back{height:100%;left:0;mask-image:linear-gradient(90deg,#000 var(--position-x),transparent var(--position-x));object-position:center;padding:inherit;position:absolute;top:0}.image-compare__back--cover,.image-compare__front--cover{object-fit:cover}.image-compare__back--contain,.image-compare__front--contain{object-fit:contain}.image-compare__back:after{background:#fff;bottom:0;content:"";display:block;height:100%;left:100%;position:relative;top:0;width:20px}input[type=range]{cursor:pointer;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.image-compare__position{--position-y:50%;background:var(--secondary);border-radius:0;height:100%;left:var(--position-x);position:absolute;top:0;transform:translateX(calc((var(--compare-width)/2)*-1));width:var(--compare-width)}.image-compare__position:after{border-radius:50%;box-shadow:0 0 0 var(--compare-width) var(--secondary) inset,0 0 15px rgba(0,0,0,.2);content:"";display:block;height:var(--dragger);left:calc(var(--dragger)/2*-1 - var(--compare-width)/2*-1);position:absolute;top:calc(50% - var(--dragger)/2);width:var(--dragger)}.image-compare__position svg{filter:drop-shadow(0 0 6px rgba(0,0,0,.2));left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--dragger)}@media (max-width:992px){.image-compare__wrapper{--position-x:50%;--compare-width:3px;--dragger:60px}.image-compare__position svg{width:calc(var(--dragger) - 20px)}}