@property --position{syntax: "<percentage>"; inherits: true; initial-value: 50%;}.before-after{display:flex;flex-direction:column;align-items:center;gap:2.4rem}.before-after__intro{display:flex;flex-direction:column;align-items:center;gap:1.2rem;max-width:72rem;text-align:center;margin:0 auto}.before-after__eyebrow{margin:0;font-size:1.4rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(var(--color-foreground),.7)}.before-after__heading{margin:0;text-align:center}.before-after__subheading{margin:0;color:rgba(var(--color-foreground),.75);font-size:1.6rem;line-height:1.5;max-width:56rem}.before-after__subheading>*{margin:0}.before-after__slider{--position: 50%;display:block;width:100%;max-width:100rem;margin-inline:auto}.before-after__frame{position:relative;width:100%;overflow:hidden;border-radius:1.2rem;background:rgba(var(--color-foreground),.05);cursor:ew-resize;touch-action:none;-webkit-user-select:none;user-select:none;box-shadow:0 1.6rem 3.2rem rgba(var(--color-shadow),.12)}.before-after__slider.is-dragging .before-after__frame{cursor:grabbing}.before-after__image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%!important;height:100%!important;max-width:none;object-fit:cover;pointer-events:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.before-after__image--after{z-index:1}.before-after__image--before{z-index:2;clip-path:inset(0 calc(100% - var(--position)) 0 0)}.before-after__divider{position:absolute;top:0;bottom:0;left:var(--position);width:.3rem;transform:translate(-50%);background:rgb(var(--color-background));box-shadow:0 0 1.2rem #00000040;z-index:3;pointer-events:none}.before-after__handle{position:absolute;top:50%;left:var(--position);z-index:4;display:flex;align-items:center;justify-content:center;width:4rem;height:4rem;margin:0;padding:0;border:.2rem solid rgb(var(--color-foreground));border-radius:50%;background:rgb(var(--color-background));color:rgb(var(--color-foreground));cursor:grab;transform:translate(-50%,-50%);box-shadow:0 .6rem 1.6rem #0003;touch-action:none;transition:transform .15s ease,box-shadow .15s ease}.before-after__slider.is-dragging .before-after__handle{cursor:grabbing;transform:translate(-50%,-50%) scale(1.05)}.before-after__handle:focus-visible{outline:.2rem solid rgb(var(--color-foreground));outline-offset:.4rem}.before-after__handle-icon{width:55%;height:55%}.before-after__label{position:absolute;bottom:1.2rem;z-index:3;padding:.6rem 1.2rem;font-size:1.1rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;pointer-events:none;white-space:nowrap}.before-after__label--before{left:1.2rem;background:rgb(var(--color-background));color:rgb(var(--color-foreground));border:.1rem solid rgba(var(--color-foreground),.12);z-index:4}.before-after__label--after{right:1.2rem;background:rgb(var(--color-button));color:rgb(var(--color-button-text))}.before-after__caption{margin:0;font-size:1.4rem;font-style:italic;color:rgba(var(--color-foreground),.6);text-align:center;max-width:60rem}.before-after__caption>*{margin:0;font-style:italic}@media(prefers-reduced-motion:no-preference){.before-after__slider.is-pulsing{animation:before-after-pulse 1.4s ease-in-out 1}@keyframes before-after-pulse{0%{--position: 50%}25%{--position: 62%}60%{--position: 38%}to{--position: 50%}}}@media screen and (min-width:750px){.before-after{gap:3.2rem}.before-after__intro{gap:1.6rem}.before-after__eyebrow{font-size:1.6rem}.before-after__subheading{font-size:1.8rem}.before-after__handle{width:5.6rem;height:5.6rem;border-width:.3rem}.before-after__divider{width:.4rem}.before-after__label{bottom:2rem;padding:.8rem 1.6rem;font-size:1.3rem}.before-after__label--before{left:2rem}.before-after__label--after{right:2rem}.before-after__caption{font-size:1.5rem}}
/*# sourceMappingURL=/cdn/shop/t/4/assets/section-before-after-result.css.map */