@media all {
    :root {
        --color-image-compare: var(--color-accent);
    }

    .ce-type-dw_image_compare {
        --ce-image-compare_value: 50%;
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
    }

    .ce-image-compare_range {
        background-color: transparent;
        box-sizing: border-box;
        font-family: inherit;
        height: 100%;
        margin: 0;
        outline: none;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 4;
        -webkit-appearance: none;
        appearance: none;
        opacity: 0;
    }

    input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]).ce-image-compare_range {
        padding: 0;
        border: 0 none transparent;
    }

    input.ce-image-compare_range[type=range]::-webkit-slider-thumb,
    input.ce-image-compare_range[type=range]::-ms-thumb,
    input.ce-image-compare_range[type=range]::-moz-range-thumb {
        width: 0;
        border: 0 none transparent;
    }

    .ce-type-dw_image_compare .ce-row {
        margin-bottom: 0;
    }

    .ce-image-compare-wrap {
        position: relative;
    }

    .ce-image-compare-handler-wrap {
        position: absolute;
        left: var(--ce-image-compare_value);
        /*! margin-left: -.475rem; */
        z-index: 2;
        top:0;
        bottom:0;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .ce-image-compare-line,
    .ce-image-compare-handler {
        display: block;
        position: relative;
    }

    .ce-image-compare-line-wrap {
        position: absolute;
        top:0;
        left:0;
        bottom:0;
        right:0;
        border-radius: var(--border-radius);
        overflow: hidden;
    }

    .ce-image-compare-line {
        position: absolute;
        width: .125rem;
        background-color: var(--color-image-compare);
        left: var(--ce-image-compare_value);
        margin-left: -.0625rem;
        z-index: 2;
        top: 0;
        bottom: 0;
    }

    .ce-image-compare-handler {
        border: .125rem solid var(--color-image-compare);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        background-color: rgba(var(--color-bg-light-rgb),.8);
        position: absolute;
        width: 3.25rem;
        border-radius: 100%;
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .75rem;
        transition: ease all .2s;
    }

    .ce-image-compare-wrap:hover .ce-image-compare-handler {
        gap: 1rem;
    }

    .ce-image-compare-handler::before,
    .ce-image-compare-handler::after {
        content: "\f104";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        color: var(--color-image-compare);
        display: block;
        /*! position: absolute; */
        left: .625rem;
    }

    .ce-image-compare-handler::after {
        content: "\f105";
        left: auto;
        right: .625rem;
    }

    .ce-image-compare-wrap .ce-gallery > .ce-row:first-child {
        position: absolute;
        z-index:1;
        width: 100%;
        clip-path: polygon(0 0, var(--ce-image-compare_value) 0, var(--ce-image-compare_value) 100%, 0 100%);
    }

    .ce-image-compare-wrap .ce-gallery > .ce-row:last-child {
        position: relative;
    }

}