*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.before-after{

    width:100%;
    padding:80px 20px;
    display:flex;
    justify-content:center;
}

.compare-container{

    position:relative;

    width:100%;
    max-width:1100px;

    aspect-ratio:16/9;

    overflow:hidden;

    user-select:none;

    cursor:ew-resize;
}

.image{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}

.base-image{

    position:absolute;
    inset:0;
}

.overlay{

    position:absolute;

    top:0;
    left:0;

    width:50%;
    height:100%;

    overflow:hidden;
}

.overlay img{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;

    max-width:none;
}

.divider{

    position:absolute;

    top:0;

    left:50%;

    width:2px;
    height:100%;

    background:#ffffff;

    transform:translateX(-1px);

    z-index:10;
}

.handle{

    position:absolute;

    top:50%;
    left:50%;

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

    width:60px;
    height:60px;

    border-radius:50%;

    background:#ffffff;

    color:#000;

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

    font-size:24px;

    font-weight:bold;

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

    cursor:ew-resize;
}