.before-after-section{
    background-color: rgba(var(--color-background));
}
before-after{
    width:100%;
    --before-after-cursor-size:4.25rem;
    display: flex;
    flex-direction: var(--s-flex-direction);
    flex-wrap:var(--s-flex-wrap);
    justify-content: var(--s-justify-content);
    align-items: var(--s-align-items);
    row-gap:var(--s-row-gap);
    column-gap:var(--s-column-gap);
}
before-after .before-after-heading{
    max-width:1200px;
    color:rgb(var(--color-text));
    display:grid;
    row-gap:20px;
    margin-bottom:20px;
}
before-after .before-after-info{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width:100%;
    flex-basis: 40%;
    row-gap: 40px;
}

before-after .before-after-body{
    display: grid;
    grid-template: "stack";
    grid-template-rows: 100%;
    width:100%;
    max-height:700px;
    cursor: ew-resize;
    overflow: hidden;
    flex-basis: 60%
}

before-after .before-after-body>div{
    grid-area: stack;
}

before-after .before,
before-after .after{
    position: relative;
    pointer-events: none;
}

before-after .before-title,
before-after .after-title{
    position: absolute;
    top: 20px;
    color:rgb(var(--color-light-text));
}
before-after .before-title{
    left:20px;
}
before-after .after-title{
    right:20px;
}
before-after .before{
    justify-items: flex-start;
}
before-after .after{
    justify-items: flex-end;
    clip-path: inset(0 0 0 var(--before-after-cursor-position,0%));
}

before-after .before-image,
before-after .after-image{
    width:100%;
    height:100%;
}
before-after .before-after-body .before-after__cursor{
    height:100%;
    display: grid;
    grid-template: "stack";
    grid-template-rows: 100%;
    align-items: center;
    z-index: 1;
    width: fit-content;
    justify-items: center;
    inset-inline-start: calc(var(--before-after-cursor-position, 0%) - var(--before-after-cursor-size) / 2);
    position: relative;
}
before-after .before-after-body .before-after__cursor:before {
    width: .125rem;
    height: 100%;
    content:'';
    display:block;
    background-color: #ffffff;
}
before-after .before-after-body .before-after__cursor:before,
before-after .before-after-body .before-after__cursor svg{
    grid-area: stack;
}

before-after .before-after-body .before-after__cursor svg{
    width: var(--before-after-cursor-size);
    height: var(--before-after-cursor-size);
}

@media(max-width:959px){
    before-after{
        grid-template-columns: repeat(1,1fr) !important;
    }
}