.before-after{position:relative;width:100%;background:#fff}.before-after *,.before-after *:before,.before-after *:after{box-sizing:border-box}.before-after .page-width{position:relative;width:100%;margin:0 auto;padding:73px 0 120px}.before-after-slider{display:block;width:100%}.before-after__media{position:relative;width:100%;aspect-ratio:1440 / 564.77;overflow:hidden;cursor:ew-resize;touch-action:pan-y;--ba-handle-size: 30px;--ba-handle-top: 50%}.before-after__image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.before-after__image--before{z-index:1}.before-after__image--after{z-index:2;clip-path:inset(0 0 0 var(--ba-position, 50%))}.before-after__divider{position:absolute;top:0;bottom:0;left:var(--ba-position, 50%);width:2px;margin-left:-1px;background:#eee8df;z-index:3;pointer-events:none}.before-after__handle{position:absolute;top:var(--ba-handle-top, 50%);left:var(--ba-position, 50%);transform:translate(-50%,-50%);display:flex;width:var(--ba-handle-size, 30px);height:var(--ba-handle-size, 30px);align-items:center;justify-content:center;padding:0;background:#f6f4f0;border:0;border-radius:9999px;z-index:4;pointer-events:none}.before-after__icon{display:flex;width:24px;height:24px;align-items:center;justify-content:center;color:#000}.before-after__icon svg{width:100%;height:100%}.before-after__badge{position:absolute;top:16px;padding:6px 12px;background:#f6f4f0;color:#000;font-size:12px;letter-spacing:.04em;text-transform:uppercase;border-radius:9999px;z-index:3;pointer-events:none}.before-after__badge--before{left:16px}.before-after__badge--after{right:16px}.before-after__range{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.before-after__range:focus-visible~.before-after__media .before-after__handle{outline:2px solid #000000;outline-offset:2px}@media screen and (max-width:749px){.before-after .page-width{padding:14px 0 74px}.before-after__media{aspect-ratio:393 / 329;--ba-handle-size: 32px;--ba-handle-top: 45%}.before-after__badge{top:12px;padding:4px 10px;font-size:11px}}
/*# sourceMappingURL=/cdn/shop/t/11/assets/before-after.css.map */