.compare-image-container{width:25rem;height:18rem;position:relative;display:flex;border-radius:1rem;overflow:hidden}.compare-image-container .compare-image-hint{top:1rem;position:absolute;z-index:3;padding:.25rem .5rem;background:rgba(0,0,0,.3019607843);border-radius:.5rem}.compare-image-container .compare-image-hint span{color:#fff;font-size:.7rem}.compare-image-container .compare-image-hint.before{left:1rem}.compare-image-container .compare-image-hint.after{right:1rem}.compare-image-container .compare-left-container,.compare-image-container .compare-right-container{position:absolute;top:0;left:0;bottom:0;overflow:hidden}.compare-image-container .compare-left-container img,.compare-image-container .compare-right-container img{width:25rem;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}.compare-image-container .compare-left-container{width:50%;z-index:2}.compare-image-container .compare-left-container:not(.no-blur){filter:blur(5px)}.compare-image-container .compare-right-container{right:0;z-index:1}.compare-image-container .compare-drag{position:absolute;height:100%;width:.5rem;left:calc(50% - .25rem);top:0;z-index:50;font-size:1rem;cursor:ew-resize}.compare-image-container .compare-drag .bar{position:absolute;left:50%;transform:translateX(-50%);width:.15rem;height:100%;margin:auto;background:rgba(255,255,255,.9);opacity:.5}.compare-image-container .compare-drag .circle{width:1.26rem;height:1.26rem;border-radius:100%;background:#fff;position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);opacity:.7}.compare-image-container .compare-drag .circle div{position:absolute;display:block;width:.28rem;height:.28rem;border-bottom:.1rem solid rgba(0,0,0,.5);border-left:.1rem solid rgba(0,0,0,.5)}.compare-image-container .compare-drag .circle div.left-arrow{left:.21rem;top:50%;transform:translateY(-50%) rotate(45deg)}.compare-image-container .compare-drag .circle div.right-arrow{top:50%;right:.21rem;transform:translateY(-50%) rotate(223deg)}.compare-image-container .single-image{width:25rem;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}@media(max-width: 600px){.compare-image-container{width:15rem;height:11rem}.compare-image-container .compare-left-container img,.compare-image-container .compare-right-container img{width:15rem}}