.before-after{padding-top:4rem;padding-bottom:4rem}@media (min-width:1024px){.before-after{padding-top:6rem;padding-bottom:6rem}}.before-after__header{text-align:center;margin-bottom:3rem}.before-after__subtitle{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.2em;color:var(--color-foreground);opacity:0.7;margin-bottom:0.5rem}.before-after__title{font-size:1.875rem;font-family:var(--font-heading);line-height:1.25;margin-bottom:1rem}@media (min-width:1024px){.before-after__title{font-size:2.25rem}}.before-after__text{color:var(--color-foreground);opacity:0.7}.before-after__wrapper{max-width:48rem;margin:0 auto}.before-after__container{position:relative;aspect-ratio:4 / 3;border-radius:1rem;overflow:hidden;background-color:var(--color-background)}.before-after__image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.before-after__after{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 50% 0 0);will-change:clip-path}.before-after__handle{position:absolute;top:0;bottom:0;left:50%;width:4px;background-color:#fff;transform:translateX(-50%);pointer-events:none}.before-after__handle-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:3rem;height:3rem;background-color:#fff;border-radius:9999px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1)}.before-after__handle-btn svg{width:1.5rem;height:1.5rem;stroke:var(--color-foreground)}.before-after__label{position:absolute;bottom:1rem;padding:0.25rem 0.75rem;background-color:rgb(0 0 0 / 0.5);color:#fff;font-size:0.875rem;border-radius:9999px}.before-after__label--before{left:1rem}.before-after__label--after{right:1rem}.before-after__slider{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}.before-after__hint{text-align:center;font-size:0.875rem;color:var(--color-foreground);opacity:0.7;margin-top:1rem}