.before-after{aspect-ratio:4/3;border-radius:var(--radius-lg);cursor:ew-resize;-webkit-user-select:none;user-select:none;touch-action:none;background:var(--color-bg);width:100%;position:relative;overflow:hidden}.before-after__image{object-fit:cover;width:100%;height:100%;position:absolute;top:0;left:0}.before-after__before-wrapper{z-index:1;width:50%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.before-after__before-wrapper .before-after__image{width:auto;min-width:100%}.before-after__divider{background:var(--color-white);z-index:2;width:3px;height:100%;position:absolute;top:0;left:50%;transform:translate(-50%);box-shadow:0 0 8px #0000004d}.before-after__handle{background:var(--color-white);border-radius:var(--radius-full);z-index:3;width:44px;height:44px;transition:transform var(--transition-fast);justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 2px 8px #0003}.before-after__handle:hover{transform:translate(-50%,-50%)scale(1.1)}.before-after__handle svg{width:20px;height:20px;color:var(--color-text)}.before-after__label{top:var(--space-3);padding:var(--space-1) var(--space-3);font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.5px;color:var(--color-white);border-radius:var(--radius-sm);z-index:4;pointer-events:none;background:#00000080;font-weight:600;position:absolute}.before-after__label--before{left:var(--space-3)}.before-after__label--after{right:var(--space-3)}