.image-comparison{overflow:hidden;position:relative;--percent:95%;display:block}@media screen and (min-width:750px){.image-comparison{--percent:98%}}.image-comparison[animate]{--percent:50%}.image-comparison.animating .image-comparison__button{transition-duration:var(--duration-animate);transition-timing-function:ease;transition-property:top,left}.image-comparison.animating .image-comparison__after{transition-duration:var(--duration-animate);transition-timing-function:ease;transition-property:clip-path}.image-comparison__animate{height:.1rem;pointer-events:none;position:absolute;bottom:0;left:0;width:100%;display:block}.image-comparison__after{height:100%;overflow:hidden;position:absolute;top:0;left:0;width:100%;z-index:1}.image-comparison[data-layout=horizontal] .image-comparison__after{clip-path:inset(0 0 0 var(--percent))}.image-comparison[data-layout=vertical] .image-comparison__after{clip-path:inset(var(--percent) 0 0 0)}.image-comparison__button{padding:0;border:none;color:inherit;position:absolute;background-color:transparent;cursor:pointer;z-index:2}.image-comparison[data-layout=horizontal] .image-comparison__button{height:100%;top:0;cursor:col-resize;margin-left:-1.4rem;left:var(--percent);width:2.8rem}.image-comparison[data-layout=vertical] .image-comparison__button{height:2.8rem;top:var(--percent);cursor:row-resize;left:0;width:100%;margin-top:-1.4rem}.image-comparison__button:after,.image-comparison__button:before{pointer-events:none;content:"";position:absolute;background-color:rgb(var(--color-border))}.image-comparison[data-layout=horizontal] .image-comparison__button:after,.image-comparison[data-layout=horizontal] .image-comparison__button:before{height:50%;margin-left:-.15rem;left:50%;width:.3rem}.image-comparison[data-layout=vertical] .image-comparison__button:after,.image-comparison[data-layout=vertical] .image-comparison__button:before{height:.3rem;top:50%;width:50%;margin-top:-.15rem}.image-comparison[data-layout=horizontal] .image-comparison__button:before{top:0;margin-top:-2rem}.image-comparison[data-layout=horizontal] .image-comparison__button:after{margin-bottom:-2rem;bottom:0}.image-comparison[data-layout=vertical] .image-comparison__button:before{margin-left:-2rem;left:0}.image-comparison[data-layout=vertical] .image-comparison__button:after{margin-right:-2rem;right:0}.image-comparison__button span{height:4.8rem;pointer-events:none;justify-content:center;position:absolute;top:50%;background-color:rgb(var(--color-border));align-items:center;border-radius:4rem;margin-left:-1.4rem;left:50%;width:2.8rem;margin-top:-2.4rem;display:flex}.image-comparison[data-layout=vertical] .image-comparison__button span{transform:rotate(90deg)}.image-comparison__button .icon{height:1.6rem;width:auto}.image-comparison__title{pointer-events:none;transition:opacity var(--duration-default) ease;position:absolute;min-width:unset;margin:0}.image-comparison[data-layout=horizontal] .image-comparison__before .image-comparison__title{left:2rem}.image-comparison[data-layout=horizontal] .image-comparison__after .image-comparison__title{right:2rem}.image-comparison[data-layout=horizontal] .image-comparison__item--start .image-comparison__title{top:2rem}.image-comparison[data-layout=horizontal] .image-comparison__item--end .image-comparison__title{bottom:2rem}.image-comparison[data-layout=horizontal] .image-comparison__item--center .image-comparison__title{transform:translateY(-50%);top:50%}.image-comparison[data-layout=vertical] .image-comparison__before .image-comparison__title{top:2rem}.image-comparison[data-layout=vertical] .image-comparison__after .image-comparison__title{bottom:2rem}.image-comparison[data-layout=vertical] .image-comparison__item--start .image-comparison__title{left:2rem}.image-comparison[data-layout=vertical] .image-comparison__item--end .image-comparison__title{right:2rem}.image-comparison[data-layout=vertical] .image-comparison__item--center .image-comparison__title{transform:translate(-50%);left:50%}.image-comparison.scrolling .image-comparison__title{opacity:0}.image-comparison__before .comparison-placeholder{background-color:#00000080}