.before-and-after__wrapper{display:flex;flex-direction:column;gap:4rem}.before-and-after__content,.before-and-after__comparison{flex:1}.before-and-after__comparison{background:rgb(var(--color-background-secondary));border-radius:var(--media-border-radius);overflow:hidden}.before-and-after__slider-component{display:block;overflow:hidden;border-radius:var(--media-border-radius)}.before-and-after__slider-wrapper{position:relative;overflow:hidden;aspect-ratio:4 / 3;border-radius:var(--media-border-radius);cursor:ew-resize;touch-action:none}@media screen and (max-width:749px){.before-and-after,.before-and-after__wrapper{overflow:visible}.before-and-after__comparison{width:100vw;margin-left:calc(50% - 50vw)}.before-and-after__slider-component,.before-and-after__slider-wrapper{width:100%}.before-and-after__comparison,.before-and-after__slider-component,.before-and-after__slider-wrapper{border-radius:0}}.before-and-after__range{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:0;background:transparent;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;cursor:ew-resize;z-index:2;pointer-events:none}.before-and-after__range::-webkit-slider-thumb{-webkit-appearance:none;opacity:0;width:40px;height:40px}.before-and-after__range::-moz-range-thumb{opacity:0;width:40px;height:40px;border:none;background:transparent}.before-and-after__image-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.before-and-after__image-wrapper img,.before-and-after__image{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}.before-and-after__image-wrapper img{width:100%;height:100%;object-fit:cover;object-position:center}.before-and-after__before{z-index:1}.before-and-after__after{z-index:0}.before-and-after__image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.before-and-after__image.placeholder-svg{background:rgba(var(--color-foreground),.03)}.before-and-after__slider-line{position:absolute;top:0;left:var(--slider-position, 50%);width:.6rem;height:100%;background:rgb(var(--color-background));z-index:1;pointer-events:none;transform:translate(-50%)}.before-and-after__slider-thumb{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4.8rem;height:4.8rem;display:flex;align-items:center;justify-content:center;background:rgb(var(--color-background));color:rgb(var(--color-accent));border-radius:var(--media-border-radius);box-shadow:0 0 22px rgba(var(--color-foreground),.3);transition:transform .2s ease}.before-and-after__slider-thumb svg{width:2rem}.before-and-after__range:hover~.before-and-after__slider-line .before-and-after__slider-thumb,.before-and-after__slider-wrapper:hover .before-and-after__slider-thumb{transform:translate(-50%,-50%) scale(1.1)}.before-and-after__range:active~.before-and-after__slider-line .before-and-after__slider-thumb,.before-and-after__slider-wrapper.is-dragging .before-and-after__slider-thumb{transform:translate(-50%,-50%) scale(.9)}.before-and-after__caption{position:absolute;top:1.5rem;bottom:auto;z-index:1;max-width:calc(50% - 2rem)}.before-and-after__caption--before{left:1.5rem;right:auto}.before-and-after__caption--after{right:1.5rem;left:auto}.before-and-after__caption-text{display:inline-block;padding:.2rem .4rem;border-radius:min(var(--content-container-border-radius),1rem);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);vertical-align:top}.before-and-after__caption-text.subheading:has(.subheading-icon){display:inline-flex;align-items:center;gap:.8rem;width:auto;max-width:100%}.before-and-after__caption--container{display:inline-block;max-width:calc(100% - 3.4rem);padding:.4rem;color:var(--color-article_badge_text);background-color:var(--color-article_badge_background);border-radius:var(--product-badge-border-radius);line-height:0;width:max-content}.before-and-after__caption--container .before-and-after__caption-text{display:inline;padding:0;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none;color:inherit;vertical-align:baseline;line-height:normal}.before-and-after__caption--container .before-and-after__caption-text.subheading:has(.subheading-icon){display:inline-flex;align-items:center;gap:.8rem;width:auto;max-width:100%}.before-and-after__caption--container .before-and-after__caption-text.heading-color,.before-and-after__caption--container .before-and-after__caption-text.text-color,.before-and-after__caption--container .before-and-after__caption-text.accent-color{color:inherit}.before-and-after__caption-text a{text-decoration:none}.before-and-after__button{position:absolute;top:auto;bottom:1.5rem;z-index:1;max-width:calc(50% - 2rem);pointer-events:auto}.before-and-after__button a{cursor:pointer}@media screen and (max-width:749px){.before-and-after__button a{padding-inline:2rem}}.before-and-after__button--before{left:1.5rem;right:auto}.before-and-after__button--after{right:1.5rem;left:auto;display:flex;justify-content:flex-end}.before-and-after__placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:30rem;padding:3rem;background:rgba(var(--color-foreground),.03);border:1px dashed rgba(var(--color-foreground),.1);border-radius:var(--media-border-radius);text-align:center}.before-and-after__placeholder-image{width:8rem;height:8rem;opacity:.3;margin-bottom:2rem}.before-and-after__placeholder-text{font-size:1.4rem;color:rgba(var(--color-foreground),.7);margin:0}@media screen and (min-width:950px){.before-and-after__wrapper{flex-direction:row;align-items:flex-start;gap:4rem}.before-and-after__caption--container{max-width:calc(100% - 5.4rem)}.before-and-after__content{max-width:42rem;position:sticky;top:var(--header-bottom-position, 8rem)}.before-and-after__container{gap:1.5rem}.before-and-after__slider-line{width:.8rem}.before-and-after__slider-thumb{width:6.8rem;height:6.8rem}.before-and-after__slider-thumb svg{width:2.4rem}.before-and-after__caption{top:2.4rem;bottom:auto}.before-and-after__caption--before{left:2.4rem;right:auto}.before-and-after__caption--after{left:auto;right:2.4rem}.before-and-after__button{bottom:2.4rem}.before-and-after__button--before{left:2.4rem;right:auto}.before-and-after__button--after{left:auto;right:2.4rem}.before-and-after__placeholder{min-height:40rem;padding:4rem}.before-and-after__placeholder-image{width:10rem;height:10rem}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/section-before-and-after.css.map */