.ghostkit-image-compare{--gkt-image-compare__position: 50%;--gkt-image-compare--divider__width: 3px;--gkt-image-compare--divider__background-color: #fff;--gkt-image-compare--divider-icons__font-size: 1.3em;--gkt-image-compare--divider-icons__offset: 0.3em;--gkt-image-compare--divider-icons__color: #000;--gkt-image-compare--divider-hover-icons__offset: 0.35em;--gkt-image-compare--divider-button__width: 50px;--gkt-image-compare--divider-button__height: 50px;--gkt-image-compare--divider-button__background-color: var(--gkt-image-compare--divider__background-color);--gkt-image-compare--label__backdrop-filter: brightness(0.75) blur(10px);--gkt-image-compare--label__offset: 10px;--gkt-image-compare--label__max-width: 30%;--gkt-image-compare--label__padding: 0.3em 1.6em;--gkt-image-compare--label__font-size: 0.8em;--gkt-image-compare--label__text-align: center;--gkt-image-compare--label__color: #fff;--gkt-image-compare--label__background-color: rgba(255, 255, 255, 30%);--gkt-image-compare--label__border-radius: 3px;--gkt-image-compare__transition-duration: var(--gkt-transition-duration);--gkt-image-compare__transition-easing: var(--gkt-transition-easing)}.ghostkit-image-compare{cursor:pointer}.ghostkit-image-compare-images{position:relative;overflow:hidden}.ghostkit-image-compare-images img{display:block;width:100%;height:auto}.ghostkit-image-compare-image-before,.ghostkit-image-compare-image-after{transition:var(--gkt-image-compare__transition-duration) clip-path var(--gkt-image-compare__transition-easing)}.ghostkit-image-compare-image-before{clip-path:polygon(var(--gkt-image-compare__position) 0, var(--gkt-image-compare__position) 100%, 0 100%, 0 0)}.ghostkit-image-compare-vertical .ghostkit-image-compare-image-before{clip-path:polygon(100% 0, 100% var(--gkt-image-compare__position), 0 var(--gkt-image-compare__position), 0 0)}.ghostkit-image-compare-image-after{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;clip-path:polygon(100% 0, 100% 100%, var(--gkt-image-compare__position) 100%, var(--gkt-image-compare__position) 0)}.ghostkit-image-compare-vertical .ghostkit-image-compare-image-after{clip-path:polygon(100% var(--gkt-image-compare__position), 100% 100%, 0 100%, 0 var(--gkt-image-compare__position))}.ghostkit-image-compare-image-after img{width:100%;height:100%;object-fit:cover}.ghostkit-image-compare-images-divider{position:absolute;top:0;left:var(--gkt-image-compare__position);width:var(--gkt-image-compare--divider__width);height:100%;margin-left:calc(var(--gkt-image-compare--divider__width) / -2);background-color:var(--gkt-image-compare--divider__background-color);transition-timing-function:var(--gkt-image-compare__transition-easing);transition-duration:var(--gkt-image-compare__transition-duration);transition-property:left;will-change:left, top}.ghostkit-image-compare-vertical .ghostkit-image-compare-images-divider{top:var(--gkt-image-compare__position);left:0;width:100%;height:var(--gkt-image-compare--divider__width);margin-top:calc(var(--gkt-image-compare--divider__width) / -2);margin-left:0;transition-property:top}.ghostkit-image-compare-vertical .ghostkit-image-compare-images-divider::after{top:50%;right:0;bottom:auto;left:0;width:auto;height:var(--gkt-image-compare--divider-button__width);cursor:row-resize;transform:translateY(-50%)}.ghostkit-image-compare-images-divider:hover,.ghostkit-image-compare-images-divider:focus{--gkt-image-compare--divider-icons__offset: var(--gkt-image-compare--divider-hover-icons__offset)}.ghostkit-image-compare-images-divider::before{position:absolute;top:50%;left:50%;display:block;width:var(--gkt-image-compare--divider-button__width);height:var(--gkt-image-compare--divider-button__height);content:"";background-color:var(--gkt-image-compare--divider-button__background-color);border-radius:var(--gkt-image-compare--divider-button__width);transform:translateX(-50%) translateY(-50%)}.ghostkit-image-compare-images-divider::after{position:absolute;top:0;bottom:0;left:50%;display:block;width:var(--gkt-image-compare--divider-button__width);cursor:col-resize;content:"";transform:translateX(-50%)}.ghostkit-image-compare-images-divider-button-arrow-left,.ghostkit-image-compare-images-divider-button-arrow-right{position:absolute;top:50%;left:50%;font-size:var(--gkt-image-compare--divider-icons__font-size);color:var(--gkt-image-compare--divider-icons__color);transition-timing-function:var(--gkt-image-compare__transition-easing);transition-duration:var(--gkt-image-compare__transition-duration);transition-property:margin-left;transform:translateX(-50%) translateY(-50%)}.ghostkit-image-compare-vertical .ghostkit-image-compare-images-divider-button-arrow-left,.ghostkit-image-compare-vertical .ghostkit-image-compare-images-divider-button-arrow-right{transition-property:margin-top}.ghostkit-image-compare-images-divider-button-arrow-left svg,.ghostkit-image-compare-images-divider-button-arrow-right svg{display:block;width:1em;max-width:none;height:1em;color:inherit}.ghostkit-image-compare-images-divider-button-arrow-left{margin-left:calc(-1 * var(--gkt-image-compare--divider-icons__offset))}.ghostkit-image-compare-vertical .ghostkit-image-compare-images-divider-button-arrow-left{margin-top:calc(-1 * var(--gkt-image-compare--divider-icons__offset));margin-left:0}.ghostkit-image-compare-vertical .ghostkit-image-compare-images-divider-button-arrow-left>svg{transform:rotate(90deg)}.ghostkit-image-compare-images-divider-button-arrow-right{margin-left:var(--gkt-image-compare--divider-icons__offset)}.ghostkit-image-compare-vertical .ghostkit-image-compare-images-divider-button-arrow-right{margin-top:var(--gkt-image-compare--divider-icons__offset);margin-left:0}.ghostkit-image-compare-vertical .ghostkit-image-compare-images-divider-button-arrow-right>svg{transform:rotate(90deg)}.ghostkit-image-compare-image-label{position:absolute;z-index:1;max-width:var(--gkt-image-compare--label__max-width);padding:var(--gkt-image-compare--label__padding);font-size:var(--gkt-image-compare--label__font-size);color:var(--gkt-image-compare--label__color);text-align:var(--gkt-image-compare--label__text-align);background-color:var(--gkt-image-compare--label__background-color);border-radius:var(--gkt-image-compare--label__border-radius);backdrop-filter:var(--gkt-image-compare--label__backdrop-filter)}.ghostkit-image-compare-image-before-label{left:var(--gkt-image-compare--label__offset)}.ghostkit-image-compare-image-after-label{right:var(--gkt-image-compare--label__offset)}.ghostkit-image-compare-labels-align-start .ghostkit-image-compare-image-label{top:var(--gkt-image-compare--label__offset)}.ghostkit-image-compare-labels-align-end .ghostkit-image-compare-image-label{bottom:var(--gkt-image-compare--label__offset)}.ghostkit-image-compare-labels-align-center .ghostkit-image-compare-image-label{top:50%;transform:translateY(-50%)}.ghostkit-image-compare-vertical .ghostkit-image-compare-image-before-label{top:var(--gkt-image-compare--label__offset);bottom:auto;left:auto}.ghostkit-image-compare-vertical .ghostkit-image-compare-image-after-label{top:auto;right:auto;bottom:var(--gkt-image-compare--label__offset)}.ghostkit-image-compare-vertical.ghostkit-image-compare-labels-align-start .ghostkit-image-compare-image-label{left:var(--gkt-image-compare--label__offset)}.ghostkit-image-compare-vertical.ghostkit-image-compare-labels-align-end .ghostkit-image-compare-image-label{right:var(--gkt-image-compare--label__offset)}.ghostkit-image-compare-vertical.ghostkit-image-compare-labels-align-center .ghostkit-image-compare-image-label{left:50%;transform:translateX(-50%)}