.before-after{

    padding:80px 0;

}

.compare{

    position:relative;

    width:100%;
    max-width:700px;
    max-height: 300px;
    aspect-ratio:1;

    margin:auto;

    overflow:hidden;

    border-radius:18px;

    cursor:ew-resize;

    user-select:none;

    touch-action:none;

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

}

.compare-img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    pointer-events:none;

}

/* Øverste billede */

.before-img{

    clip-path:inset(0 50% 0 0);

    z-index:5;

}

.divider{

    position:absolute;

    top:0;
    bottom:0;

    left:50%;

    width:3px;

    background:#fff;

    transform:translateX(-50%);

    z-index:20;

    pointer-events:none;

}

.divider::before{

    content:"";

    position:absolute;

    left:50%;
    top:0;

    transform:translateX(-50%);

    width:60px;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.15) 35%,
        rgba(255,255,255,.35) 50%,
        rgba(255,255,255,.15) 65%,
        transparent
    );

}
.handle{

    position:absolute;

    top:70%;
    left:50%;

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

    width:50px;
    height:50px;

    border-radius:50%;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#ff7a00;

    font-size:22px;

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

}


@keyframes sliderHint{

    /* Hvile */
    0%,70%,100%{

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

    }

    /* Træk mod venstre */
    10%{

        transform:translate(calc(-50% - 18px),-50%);

    }

    /* Tilbage */
    20%{

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

    }

    /* Lille ekstra nudge */
    28%{

        transform:translate(calc(-50% - 8px),-50%);

    }

    36%{

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

    }

}

.handle{

    animation:sliderHint 4s ease-in-out infinite;

}

.label{

    position:absolute;

    top:20px;

    padding:5px 13px;

    border-radius:999px;

    background:rgba(0,0,0,.45);

    color:#fff;

    font-weight:400;

    z-index:30;

}

.before-label{

    left:20px;

}

.after-label{

    right:20px;

}