.before-after{padding:6.4rem 0;background:rgb(var(--color-background));color:rgb(var(--color-foreground))}.before-after__layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"header" "media" "details";row-gap:3.2rem;max-width:calc(var(--page-width) - 2 * var(--page-width-padding));margin:0 auto}.before-after__header{grid-area:header;display:flex;flex-direction:column;align-items:center;gap:.4rem;max-width:72rem;margin:0 auto;text-align:center}.before-after__subtitle,.before-after__title{margin:0;color:rgb(var(--color-foreground))}.before-after__subtitle{text-transform:uppercase;font-size:1.8rem;letter-spacing:var(--letter-spacing)}.before-after__title{font-size:3.2rem;line-height:1.15}.before-after__description{font-size:1.6rem;line-height:1.5}.before-after__description>:first-child{margin-top:0}.before-after__description>:last-child{margin-bottom:0}.before-after__frame{grid-area:media;position:relative;display:block;width:100%;max-width:min(140rem,112.5vh);max-width:min(140rem,112.5svh);margin:0 auto;aspect-ratio:3 / 2;overflow:hidden;cursor:ew-resize;user-select:none;-webkit-user-select:none;touch-action:pan-y}.before-after__layer{position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgb(var(--color-background))}.before-after__layer--before{clip-path:inset(0 calc(100% - var(--position)) 0 0);transition:clip-path .35s ease}.before-after__image{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.before-after__placeholder{background-color:rgba(var(--color-foreground),.06);color:rgba(var(--color-foreground),.45)}.before-after__placeholder-ground{fill:rgb(var(--color-background))}.before-after__placeholder-rug{fill:#c98b8b73}.before-after__label{position:absolute;top:1.6rem;padding:.6rem 1.2rem;border-radius:var(--button-radius);background-color:#fefdfcd9;color:var(--color-dark-grey);font-size:var(--button-font-size-small);font-weight:300;letter-spacing:.04em;line-height:1.2;text-transform:uppercase;white-space:nowrap}.before-after__label--before{left:1.6rem}.before-after__label--after{right:1.6rem}.before-after__handle{position:absolute;top:0;bottom:0;left:var(--position);width:2px;margin-left:-1px;background-color:var(--color-white);box-shadow:0 0 6px #00000040;pointer-events:none;transition:left .35s ease}.before-after__knob{position:absolute;top:50%;left:50%;display:flex;align-items:center;justify-content:center;width:4.8rem;height:4.8rem;border-radius:50%;background-color:var(--color-white);color:var(--color-dark-grey);box-shadow:0 2px 10px #00000040;transform:translate(-50%,-50%)}.before-after__knob svg{width:2.4rem;height:2.4rem}.before-after__frame.is-dragging .before-after__layer--before,.before-after__frame.is-dragging .before-after__handle{transition:none}.before-after__range{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.before-after__frame:has(.before-after__range:focus-visible) .before-after__knob{outline:2px solid var(--color-white);outline-offset:3px}.before-after__details{grid-area:details;display:flex;flex-direction:column;align-items:center;gap:3.2rem;text-align:center}.before-after__quote{margin:0 0 1.6rem;max-width:46rem}.before-after__quote-text{margin:0;padding:0;font-style:italic}.before-after__quote-text p{margin:0;font-family:"Gill Sans","Gill Sans MT",var(--font-body-family);font-weight:300;font-size:1.8rem;line-height:1.5}.before-after__quote-inline{display:none;font-style:normal;white-space:nowrap}.before-after__quote-author{margin-top:.8rem;font-family:var(--font-cursive-family);font-weight:var(--font-cursive-weight);font-size:2.8rem;line-height:1.1}.before-after__shown>*{margin:0}.before-after__shown-label{font-size:1.4rem;letter-spacing:var(--letter-spacing);text-transform:uppercase;opacity:.75}.before-after__shown-name{margin-top:.4rem;font-size:1.8rem;line-height:1.3}.before-after__shown-size{font-size:1.6rem;line-height:1.5}@media screen and (min-width:990px){.before-after__layout{grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-rows:1fr auto auto 1fr;grid-template-areas:"media ." "media header" "media details" "media .";column-gap:6.4rem;row-gap:4rem}.before-after__frame{margin:0}.before-after__header{align-items:flex-start;max-width:none;margin:0;text-align:left}.before-after__details{align-items:flex-start;text-align:left}.before-after__quote-inline{display:inline}.before-after__quote-author{display:none}}@media screen and (max-width:749px){.before-after{padding:4.8rem 0}.before-after__title{font-size:2.6rem}.before-after__quote-text p{font-size:1.7rem}.before-after__quote-author{font-size:2.6rem}.before-after__label{top:1rem;padding:.4rem .7rem;font-size:1.1rem}.before-after__label--before{left:1rem}.before-after__label--after{right:1rem}.before-after__knob{width:4.4rem;height:4.4rem}}@media(prefers-reduced-motion:reduce){.before-after__layer--before,.before-after__handle{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/232/assets/before-after.css.map */