.img-comp-container,.img-comp-container *{box-sizing:border-box}.img-comp-container{aspect-ratio:16/9;margin:0 auto;max-width:800px;overflow:hidden;position:relative;touch-action:pan-y;width:100%}.img-comp-img{height:100%;inset:0;overflow:hidden;position:absolute;width:100%}.img-comp-img.img-comp-overlay{clip-path:inset(0 50% 0 0)}.img-comp-img img{display:block;height:100%;object-fit:cover;width:100%}.img-comp-slider{background-color:transparent;border:3px solid #fff;border-radius:50%;box-shadow:0 0 12px rgba(51,51,51,.5);color:#000;cursor:ew-resize;font-size:20px;height:40px;left:50%;padding-top:1px;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);width:40px;z-index:9}.img-comp-slider:after,.img-comp-slider:before{background:#fff;content:" ";display:block;position:absolute;z-index:30}.img-comp-slider:before{bottom:50%;box-shadow:0 3px 0 #fff,0 0 12px rgba(51,51,51,.5);margin-bottom:22px}.img-comp-slider:after,.img-comp-slider:before{height:9999px;left:50%;transform:translateX(-50%);width:3px}.img-comp-slider:after{box-shadow:0 -3px 0 #fff,0 0 12px rgba(51,51,51,.5);margin-top:22px;top:50%}.img-slider-overlay{background:transparent;height:100%;pointer-events:none;position:absolute;top:0;transition-duration:.5s;width:100%}.img-slider-overlay .left-label,.img-slider-overlay .right-label{background:hsla(0,0%,100%,.2);border-radius:2px;color:#fff;font-size:13px;letter-spacing:.1em;line-height:38px;margin-top:-19px;opacity:0;padding:0 20px;position:absolute;top:50%}.img-slider-overlay .left-label{left:10px}.img-slider-overlay .right-label{right:10px}.img-comp-container:hover .img-slider-overlay{background:rgba(0,0,0,.5)}.img-comp-container:hover .left-label,.img-comp-container:hover .right-label{opacity:1}.img-comp-container:hover .img-comp-slider{color:#fff}