.before-after-section{overflow:hidden;position:relative;z-index:0}.section-wrapping-before-after{position:relative}.section-background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}.before-after-section .page-width{position:relative;z-index:1}.before-after-container{display:grid;grid-template-columns:1fr;gap:4rem;align-items:center}@media screen and (min-width: 750px){.before-after-container{grid-template-columns:1fr 1fr;gap:5rem}}@media screen and (min-width: 990px){.before-after-container{gap:7rem}}.before-after-container--reverse{direction:rtl}.before-after-container--reverse>*{direction:ltr}.before-after-slider{position:relative;width:100%}.before-after-slider__wrapper{position:relative;width:100%;overflow:hidden;border-radius:8px;cursor:ew-resize;-webkit-user-select:none;user-select:none}.before-after-slider__wrapper.is-dragging{cursor:grabbing}.before-after-slider__image{position:relative;width:100%;display:block}.before-after-slider__image{aspect-ratio:4 / 5}.before-after-slider__image img,.before-after-slider__image svg{display:block;width:100%;height:100%;object-fit:cover}.before-after-slider__image--after{position:absolute;top:0;left:0;right:0;bottom:0;clip-path:inset(0 50% 0 0);transition:clip-path .1s ease-out}.before-after-slider__wrapper.is-dragging .before-after-slider__image--after{transition:none}.before-after-slider__handle{position:absolute;top:0;bottom:0;width:4px;background:transparent;transform:translate(-50%);cursor:ew-resize;z-index:2;touch-action:none}.before-after-slider__handle-line{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;transform:translate(-50%);box-shadow:0 0 10px #0000004d}.before-after-slider__handle-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px #0003;cursor:grab;transition:transform .2s ease,box-shadow .2s ease}.before-after-slider__wrapper.is-dragging .before-after-slider__handle-button{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1);box-shadow:0 4px 15px #0000004d}.before-after-slider__handle-button svg{width:20px;height:20px;color:#333}.before-after-slider__handle-button svg:first-child{margin-right:-4px}.before-after-slider__handle-button svg:last-child{margin-left:-4px}.before-after-slider__label-overlay{position:absolute;top:20px;padding:8px 16px;background:#000000b3;color:#fff;font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;border-radius:4px;z-index:3;pointer-events:none}.before-after-slider__label-overlay--before{right:20px}.before-after-slider__label-overlay--after{left:20px}.before-after-content{display:flex;flex-direction:column;gap:1.5rem}.before-after-content__heading{margin:0;color:rgb(var(--color-foreground))}.before-after-content__text{color:rgba(var(--color-foreground),.75)}.before-after-content__text p:first-child{margin-top:0}.before-after-content__text p:last-child{margin-bottom:0}.before-after-content .button{align-self:flex-start;margin-top:.5rem}@media screen and (max-width: 749px){.before-after-slider__handle-button{width:40px;height:40px}.before-after-slider__handle-button svg{width:16px;height:16px}}@media (prefers-reduced-motion: reduce){.before-after-slider__image--after,.before-after-slider__handle-button{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/12/assets/section-before-after.css.map */
