.mi-before-after{--mi-before-after-position:50%;--mi-before-after-divider-radius:18px;width:100%}.mi-before-after__viewport{position:relative;width:100%;min-height:280px;overflow:hidden;border-radius:16px;background-color:#f5f5f5;cursor:ew-resize;touch-action:none;user-select:none}.mi-before-after__image{position:absolute;inset:0}.mi-before-after__image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center;pointer-events:none}.mi-before-after__image--before{clip-path:inset(0 calc(100% - var(--mi-before-after-position)) 0 0)}.mi-before-after__image--after{clip-path:inset(0 0 0 var(--mi-before-after-position))}.mi-before-after__divider{position:absolute;z-index:3;top:0;bottom:0;left:var(--mi-before-after-position);display:block;width:26px;background-color:#fff;transform:translateX(-50%);pointer-events:none}.mi-before-after__divider::after,.mi-before-after__divider::before{content:"";position:absolute;left:calc(var(--mi-before-after-divider-radius) * -1);width:calc(100% + var(--mi-before-after-divider-radius) * 2);height:var(--mi-before-after-divider-radius);background:radial-gradient(circle at 0 100%,transparent var(--mi-before-after-divider-radius),#fff calc(var(--mi-before-after-divider-radius) + 1px)) left top/var(--mi-before-after-divider-radius) var(--mi-before-after-divider-radius) no-repeat,radial-gradient(circle at 100% 100%,transparent var(--mi-before-after-divider-radius),#fff calc(var(--mi-before-after-divider-radius) + 1px)) right top/var(--mi-before-after-divider-radius) var(--mi-before-after-divider-radius) no-repeat,linear-gradient(#fff,#fff) center/calc(100% - var(--mi-before-after-divider-radius) * 2) 100% no-repeat}.mi-before-after__divider::before{top:0}.mi-before-after__divider::after{bottom:0;transform:rotate(180deg)}.mi-before-after__handle{position:absolute;z-index:4;top:50%;left:var(--mi-before-after-position);display:inline-flex;align-items:center;justify-content:center;gap:2px;width:58px;height:58px;padding:0;border:0;border-radius:50%;background-color:#fff;color:#323642;box-shadow:0 12px 28px rgba(50,54,66,.14);cursor:ew-resize;transform:translate(-50%,-50%);transition:box-shadow 220ms ease,transform 220ms ease,background-color 220ms ease,color 220ms ease}.mi-before-after__handle:focus-visible{box-shadow:0 0 0 3px rgba(234,67,53,.25),0 12px 28px rgba(50,54,66,.14)}.mi-before-after__handle-icon{display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1}.mi-before-after__handle-icon i,.mi-before-after__handle-icon svg{display:block;width:1em;height:1em;fill:currentColor}.mi-before-after__label{position:absolute;z-index:2;top:16px;padding:7px 12px;border-radius:999px;background-color:rgba(255,255,255,.86);color:#323642;font-size:12px;line-height:1.2;font-weight:600;text-transform:uppercase;pointer-events:none}.mi-before-after__label--before{left:16px}.mi-before-after__label--after{right:16px}.mi-before-after.is-dragging .mi-before-after__handle{transform:translate(-50%,-50%) scale(1.04);box-shadow:0 16px 34px rgba(50,54,66,.18)}