.before-after__header{text-align:center;max-width:40rem;margin:0 auto 2rem}.before-after__heading{margin:0 0 .75rem}.before-after__subheading{margin:0;opacity:.75}.before-after__slider{display:block;position:relative;width:100%;max-width:68rem;margin:0 auto;min-height:22rem}.before-after__frame{position:relative;display:block;width:100%;overflow:hidden;border-radius:4px;background:rgba(var(--color-foreground),.06);min-height:22rem;aspect-ratio:16 / 9}.before-after__layer--after{position:relative;z-index:1;width:100%;height:100%;min-height:inherit}.before-after__layer--before{position:absolute;inset:0 auto 0 0;z-index:2;width:50%;height:100%;overflow:hidden}.before-after__image,.before-after__placeholder{display:block;width:100%;height:100%;min-height:22rem;object-fit:cover}.before-after__placeholder{position:relative;background:rgba(var(--color-foreground),.04)}.before-after__placeholder-svg,.before-after__placeholder .placeholder-svg,.before-after__placeholder svg,.before-after__placeholder .before-after__image{display:block;width:100%;height:100%;min-height:22rem;object-fit:cover}.before-after__layer--before .before-after__image,.before-after__layer--before .before-after__placeholder,.before-after__layer--before .before-after__placeholder-svg,.before-after__layer--before .before-after__placeholder .placeholder-svg,.before-after__layer--before .before-after__placeholder svg{position:absolute;top:0;left:0;width:var(--ba-frame-width, 100%);max-width:none;height:100%;min-height:100%;object-fit:cover}.before-after__badge{position:absolute;bottom:.85rem;z-index:3;padding:.2rem .5rem;font-size:.7rem;letter-spacing:.04em;background:rgba(var(--color-background),.78);color:rgb(var(--color-foreground))}.before-after__badge--before{left:.85rem}.before-after__badge--after{right:.85rem}.before-after__handle{position:absolute;top:0;bottom:0;left:50%;z-index:4;width:2rem;transform:translate(-50%);pointer-events:none}.before-after__handle-line{position:absolute;top:0;bottom:0;left:50%;width:1px;transform:translate(-50%);background:rgba(var(--color-foreground),.35)}.before-after__handle-knob{position:absolute;top:50%;left:50%;display:flex;align-items:center;justify-content:center;gap:.2rem;width:1.65rem;height:1.65rem;border:1px solid rgba(var(--color-foreground),.22);border-radius:50%;transform:translate(-50%,-50%);background:rgba(var(--color-background),.82)}.before-after__handle-chevron{width:.32rem;height:.32rem;border-top:1px solid rgba(var(--color-foreground),.55);border-right:1px solid rgba(var(--color-foreground),.55)}.before-after__handle-chevron--left{transform:rotate(-135deg)}.before-after__handle-chevron--right{transform:rotate(45deg)}.before-after__range{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;appearance:none;-webkit-appearance:none}.before-after__range:focus-visible{opacity:0;outline:none}.before-after__slider:focus-within .before-after__handle-knob{box-shadow:0 0 0 2px rgb(var(--color-background)),0 0 0 3px rgba(var(--color-foreground),.35)}@media(prefers-reduced-motion:reduce){.before-after__layer--before,.before-after__handle{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/49/assets/section-before-after.css.map */