.compare {
        display: grid;

        > * {
           grid-area: 1 / 1;
        }

        .before {
             background: linear-gradient(to right, hotpink, rebeccapurple);
             mask: linear-gradient(to right, #000 0, var(--pos,50%), #0000 0);
        }

        .after {
             background: linear-gradient(to right, cyan, lime);
             mask: linear-gradient(to right, #0000 0, var(--pos,50%), #000 0);
        }

        > input[type="range"] {
            z-index: 1;
            appearance: none;
            background: none;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            &::-webkit-slider-thumb {
                appearance: none;
                width: 4px;
                height: 100dvh;
                background-color: chocolate;
            }
            &::-moz-range-thumb {
                appearance: none;
            }
        }
        img {
            width: 100%;
        }
}

html {
   block-size: 100%;
   color-scheme: dark light;
}
body {
    font-family: sans-serif;
    display: grid;
}