.before-after__inner{text-align:center}.before-after__heading{margin:0 0 1.5rem}.before-after__text{max-width:72rem;margin:0 auto 2rem}.before-after__widget{display:block}.before-after__frame{position:relative;width:100%;max-width:68rem;margin:0 auto;aspect-ratio:1 / 1;overflow:hidden;border-radius:var(--media-radius, 0);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.before-after__img{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.before-after__after-wrap{position:absolute;top:0;right:0;bottom:0;left:0;clip-path:inset(0 0 0 var(--ba-exposure, 50%))}.before-after__divider{position:absolute;top:0;bottom:0;left:var(--ba-exposure, 50%);width:.3rem;transform:translate(-50%);background:rgb(var(--color-background));box-shadow:0 0 .4rem #00000059;pointer-events:none}.before-after__handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:4.4rem;height:4.4rem;border-radius:50%;background:rgb(var(--color-background));color:rgb(var(--color-foreground));box-shadow:0 .2rem .6rem #0000004d}.before-after__widget.is-autoplaying .before-after__after-wrap{animation:before-after-sweep 7s ease-in-out infinite}.before-after__widget.is-autoplaying .before-after__divider{animation:before-after-sweep-divider 7s ease-in-out infinite}.before-after__widget.is-autoplaying .before-after__label--before{animation:before-after-label-before 7s ease-in-out infinite}.before-after__widget.is-autoplaying .before-after__label--after{animation:before-after-label-after 7s ease-in-out infinite}@keyframes before-after-sweep{0%,to{clip-path:inset(0 0 0 0%)}50%{clip-path:inset(0 0 0 100%)}}@keyframes before-after-sweep-divider{0%,to{left:0%}50%{left:100%}}@keyframes before-after-label-before{0%,6%{opacity:0}14%,86%{opacity:1}94%,to{opacity:0}}@keyframes before-after-label-after{0%,38%{opacity:1}46%,54%{opacity:0}62%,to{opacity:1}}.before-after__widget.is-paused .before-after__after-wrap,.before-after__widget.is-paused .before-after__divider,.before-after__widget.is-paused .before-after__label--before,.before-after__widget.is-paused .before-after__label--after{animation-play-state:paused}.before-after__pause{position:absolute;right:1.2rem;bottom:1.2rem;display:none;align-items:center;justify-content:center;width:4.4rem;height:4.4rem;padding:0;border:none;border-radius:50%;background:rgb(var(--color-background));color:rgb(var(--color-foreground));box-shadow:0 .2rem .6rem #0000004d;cursor:pointer}.before-after__widget.is-autoplaying .before-after__pause{display:flex}.before-after__pause .before-after__pause-icon--play,.before-after__widget.is-paused .before-after__pause-icon--pause{display:none}.before-after__widget.is-paused .before-after__pause-icon--play{display:block}.before-after__pause:focus-visible,.before-after__pause.focused{outline:.2rem solid rgba(var(--color-foreground),.5);outline-offset:.3rem;box-shadow:0 0 0 .3rem rgb(var(--color-background)),0 0 .5rem .4rem rgba(var(--color-foreground),.3)}.before-after__label{position:absolute;top:1.2rem;padding:.5rem 1.2rem;font-size:1.2rem;letter-spacing:.1rem;text-transform:uppercase;color:#fff;background:#0000008c;border-radius:2rem;opacity:1;pointer-events:none}.before-after__label--before{left:1.2rem}.before-after__label--after{right:1.2rem}.before-after__hint{margin:1.6rem 0 0;font-size:1.3rem;letter-spacing:.06rem;text-transform:uppercase;color:rgba(var(--color-foreground),.75)}.before-after__cta{margin-top:2.4rem}@media screen and (min-width:750px){.before-after__inner{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);grid-template-rows:1fr auto auto auto 1fr auto;grid-template-areas:".       media" "heading media" "text    media" "cta     media" ".       media" ".       hint";column-gap:6rem;text-align:left}.before-after__heading{grid-area:heading}.before-after__text{grid-area:text;margin:0 0 3rem;max-width:52rem}.before-after__cta{grid-area:cta;margin:0}.before-after__widget{grid-area:media}.before-after__widget .before-after__frame{max-width:none;margin:0}.before-after__hint{grid-area:hint;text-align:center}}
/*# sourceMappingURL=/cdn/shop/t/49/assets/section-before-after.css.map */