body{margin:50px}.c-compare{--w: 2048;--h: 858;--m: 0rem 0;--thumb-bgc: rgba(0, 0, 0, 0);--thumb-bgc-focus: transparent;--thumb-w:50px;margin:0;position:relative;border:0}.c-compare:after{content:"";display:block;padding-bottom:calc((var(--h) / var(--w)) * 100%)}.c-compare__left,.c-compare__right{height:100%;width:100%;object-fit:cover;position:absolute}.c-compare__left{clip-path:polygon(0% 0%,var(--value) 0%,var(--value) 100%,0% 100%)}.c-compare__right{clip-path:polygon(100% 0%,var(--value) 0%,var(--value) 100%,100% 100%)}.c-compare__range{background-color:transparent;box-sizing:border-box;font-family:inherit;height:100%;margin:0;outline:none;position:absolute;top:0;width:100%}.c-compare__range::-moz-range-thumb{background-color:var(--thumb-bgc);cursor:ew-resize;height:100%;width:var(--thumb-w);border:0}.c-compare__range::-webkit-slider-thumb{background-color:var(--thumb-bgc);cursor:ew-resize;height:100%;width:var(--thumb-w);border:0}.c-compare__range:focus::-webkit-slider-thumb{background-color:var(--thumb-bgc-focus)}.c-compare__range:focus::-moz-range-thumb{background-color:var(--thumb-bgc-focus)}.c-compare__range::-moz-range-track{background:transparent;background-size:100%;box-sizing:border-box}.c-compare__range::-webkit-slider-runnable-track{background:transparent;background-size:100%;box-sizing:border-box;height:100%}.c-compare__range,.c-compare__range::-webkit-slider-runnable-track,.c-compare__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none}.arrows{--width: 100px;position:absolute;width:var(--width);left:calc(var(--value) - var(--width) / 2);top:0;bottom:0;margin-top:auto;margin-bottom:auto;z-index:999;cursor:pointer;pointer-events:none;transition:transform .5s ease}.c-compare__range:focus+.arrows{transform:scale(.5);opacity:.3;transition:transform,opacity .5s ease}.progress{margin:0;position:relative;border:0;display:block;padding-bottom:calc((858 / 2048) * 100%)}.progress_img{height:100%;width:100%;object-fit:cover;position:absolute;opacity:0}.progress__range{height:50px;margin:0;outline:none;position:absolute;bottom:0;width:100%;cursor:ew-resize}.progress .progress_img{opacity:calc((var(--value) - ((var(--order) - 2) / var(--numImg) * 100%)) * var(--numImg))}.compare{margin:0;position:relative;border:0;display:block;padding-bottom:calc((858 / 2048) * 100%)}