.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)}.before-and-after__slider-component{display:block;border-radius:var(--media-border-radius)}.before-and-after__slider-wrapper{position:relative;aspect-ratio:4 / 3;border-radius:var(--media-border-radius)}@media screen and (max-width:749px){.before-and-after__comparison{width:100vw;margin-left:calc(50% - 50vw)}.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}.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{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:calc(var(--slider-position, 50%) - 3px);width:.6rem;height:100%;background:rgb(var(--color-background));z-index:1;pointer-events:none}.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{transform:translate(-50%,-50%) scale(1.1)}.before-and-after__range:active~.before-and-after__slider-line .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;text-align:right}.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)}.before-and-after__caption-text a{text-decoration:none}.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__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__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 */