.image-comparison-banner{--change-ratio:0}.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner{display:block;position:relative}.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner .before-item{background:rgb(var(--color-background));height:100%;padding:2rem;position:relative}.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner .before-item .media{background:rgba(var(--color-foreground),.6);height:100%;inset-block-start:0;inset-inline-start:0;position:absolute;width:100%;z-index:-1}.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner .before-item .media .placeholder-svg{fill:rgb(var(--color-background))}.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner .after-item{align-items:flex-end;display:flex;height:100%;inset-block-start:0;inset-inline-start:0;justify-content:flex-end;padding:2rem;position:absolute;width:100%}.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner .after-item .media{height:100%;inset-block-start:0;inset-inline-start:0;position:absolute;width:100%;z-index:-1}.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner .button{cursor:col-resize;position:absolute;transform:translate(calc(-50%*var(--translate-x-direction)),-50%);z-index:2}.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner .button .icon{width:.75rem}.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner:before{background:rgba(var(--color-foreground),.05);content:"";height:100%;inset-block-start:0;inset-inline-start:0;position:absolute;width:100%}.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner:after{background:rgb(var(--color-background));content:"";pointer-events:none;position:absolute}.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner.image-height--small{height:25rem}.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner.image-height--medium{height:35rem}.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner.image-height--large{height:45rem}.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner.button--is-dragging .after-heading,.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner.button--is-dragging .before-heading{animation:fadeOut .3s cubic-bezier(0,0,.3,1) forwards}.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner[data-vertical] .before-item{clip-path:polygon(0 0,100% 0,100% var(--change-ratio),0 var(--change-ratio))}.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner[data-vertical] .button{cursor:row-resize;left:50%;top:var(--change-ratio);width:3rem}.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner[data-vertical]:after{height:3px;left:0;top:var(--change-ratio);transform:translateY(-50%);width:100%}.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner[data-vertical].enable-transition .button,.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner[data-vertical].enable-transition:after{transition:top .5s cubic-bezier(0,0,.3,1)}.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner:not([data-vertical]) .before-item{clip-path:polygon(0 0,var(--change-ratio) 0,var(--change-ratio) 100%,0 100%)}.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner:not([data-vertical]) .button{height:3rem;left:var(--change-ratio);top:50%}.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner:not([data-vertical]):after{height:100%;left:var(--change-ratio);top:0;transform:translateX(calc(-50%*var(--translate-x-direction)));width:3px}.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner:not([data-vertical]).enable-transition .button,.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner:not([data-vertical]).enable-transition:after{transition:left .5s cubic-bezier(0,0,.3,1)}.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner.enable-transition .before-item{transition:clip-path .5s cubic-bezier(0,0,.3,1)}@media screen and (max-width:749px){.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner.image-height--small{height:15rem}.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner.image-height--medium{height:20rem}.image-comparison-banner .image-comparison-banner__wrapper .image-comparison-banner-inner.image-height--large{height:30rem}}