.compare-slider{
    position:relative;
    width:100%;
    aspect-ratio:16/8;

    overflow:hidden;
    border-radius:16px;
margin-bottom: 20px;
    user-select:none;
    cursor:ew-resize;
}

.compare-image{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    pointer-events:none;
}

.compare-top{
    clip-path: inset(0 50% 0 0);
}

.compare-divider{
    position:absolute;
    top:0;
    left:50%;

    width:2px;
    height:100%;

    background:#fff;
    transform:translateX(-1px);

    box-shadow:0 0 10px rgba(0,0,0,.25);
}

.compare-handle{
    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:56px;
    height:56px;

    border-radius:50%;
    background:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:22px;
    font-weight:bold;

    color:#222;

    box-shadow:0 5px 15px rgba(0,0,0,.25);
}