.before-after{padding-top:var(--padding-top);padding-bottom:var(--padding-bottom)}.before-after__container-outer{margin:0 auto;width:100%;max-width:var(--container-max-width, 100%)}.before-after__wrapper{position:relative;width:100%;overflow:hidden;border-radius:1.6rem;-webkit-user-select:none;user-select:none;touch-action:none;box-shadow:0 10px 30px #00000014;border:1px solid rgba(var(--color-foreground),.05);background:rgba(var(--color-foreground),.02)}.before-after__container{position:relative;width:100%;height:0;padding-bottom:var(--aspect-ratio);cursor:ew-resize}.before-after__image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.before-after__image--after{clip-path:inset(0 0 0 var(--slider-position, 50%))}.before-after__label{position:absolute;top:2rem;padding:.6rem 1.4rem;background:rgba(var(--color-background),.6);color:rgb(var(--color-foreground));font-size:1.1rem;text-transform:uppercase;font-weight:800;letter-spacing:.12rem;pointer-events:none;border-radius:2rem;z-index:2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(var(--color-foreground),.1);transition:opacity .3s ease}.before-after__label--before{left:2rem}.before-after__label--after{right:2rem}.before-after__wrapper:active .before-after__label{opacity:0}.before-after__handle{position:absolute;top:0;bottom:0;left:var(--slider-position, 50%);width:1px;background:#ffffff80;transform:translate(-50%);z-index:3}.before-after__handle:after{content:"";position:absolute;top:0;bottom:0;width:60px;left:50%;transform:translate(-50%);cursor:ew-resize}.before-after__circle{width:4rem;height:4rem;background:#fff;border-radius:50%;box-shadow:0 4px 15px #0003;display:flex;align-items:center;justify-content:center;color:#121212;z-index:4;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:transform .2s cubic-bezier(.175,.885,.32,1.275)}.before-after__handle:active .before-after__circle{transform:translate(-50%,-50%) scale(1.15);background:rgb(var(--color-foreground));color:rgb(var(--color-background))}.before-after__circle svg{width:2rem;height:2rem}@media screen and (max-width:749px){.before-after__label{top:1.5rem;padding:.4rem 1rem;font-size:1rem}}
/*# sourceMappingURL=/cdn/shop/t/13/assets/section-before-after.css.map */