.before-after{aspect-ratio:16/10;border-radius:var(--radius-default);background:var(--color-bg);cursor:ew-resize;touch-action:none;-webkit-user-select:none;user-select:none;width:100%;position:relative;overflow:hidden}.before-after__image{pointer-events:none;position:absolute;inset:0}.before-after__image--after{z-index:0}.before-after__image--before{z-index:1}.before-after__img{object-fit:cover;object-position:center;pointer-events:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.before-after__interaction-layer{z-index:4;cursor:ew-resize;touch-action:none;position:absolute;inset:0}.before-after__overlay{z-index:2;pointer-events:none;justify-content:space-between;align-items:flex-end;padding:1rem;display:flex;position:absolute;inset:0}.before-after__label{color:var(--color-white);font-family:var(--font-body), sans-serif;letter-spacing:.08em;text-transform:uppercase;background:#0000008c;border-radius:999px;padding:.35rem .75rem;font-size:12px;font-weight:400;line-height:16px}.before-after__handle{z-index:5;pointer-events:none;width:2px;position:absolute;top:0;bottom:0;transform:translate(-50%)}.before-after__handle-line{background:var(--color-white);width:2px;height:100%;display:block;box-shadow:0 0 8px #00000059}.before-after__handle-grip{background:var(--color-white);border-radius:999px;width:36px;height:36px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 16px #0003}.before-after__handle-grip:before,.before-after__handle-grip:after{content:"";border-style:solid;width:0;height:0;position:absolute;top:50%;transform:translateY(-50%)}.before-after__handle-grip:before{border-width:5px 6px 5px 0;border-color:transparent var(--color-primary) transparent transparent;left:10px}.before-after__handle-grip:after{border-width:5px 0 5px 6px;border-color:transparent transparent transparent var(--color-primary);right:10px}