.before-after-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.before-after-grid--image-right .before-after__interactive{order:2}.before-after-grid--image-right .before-after__content{order:1}@media screen and (max-width:989px){.before-after-grid{grid-template-columns:1fr;gap:3rem}.before-after-grid--image-right .before-after__interactive,.before-after-grid--image-right .before-after__content{order:0}}before-after-slider{display:block;width:100%;--percent: 50%}.before-after__slider{position:relative;width:100%;overflow:hidden;cursor:ew-resize;touch-action:none;aspect-ratio:1 / 1;background-color:color-mix(in oklab,var(--color-foreground) 6%,transparent)}.before-after__image-container{position:absolute;top:0;left:0;width:100%;height:100%}.before-after__image-container img,.before-after__image-container svg{width:100%;height:100%;object-fit:cover;display:block}.before-after__image-before{z-index:2;clip-path:inset(0 calc(100% - var(--percent)) 0 0);will-change:clip-path}.before-after__image-after{z-index:1}.before-after__static-grid{display:grid;grid-template-columns:1fr;gap:10px;width:100%}@media screen and (min-width:750px){.before-after__static-grid{grid-template-columns:1fr 1fr}}.before-after__static-grid .before-after__image-container{position:relative;width:100%;aspect-ratio:1 / 1;background-color:color-mix(in oklab,var(--color-foreground) 6%,transparent)}.before-after__badge{position:absolute;top:1.5rem;z-index:3;padding:.35rem .75rem;font-family:var(--font-body--family);font-size:var(--label-size);font-weight:var(--font-body--weight-bold);letter-spacing:.1em;text-transform:uppercase;background-color:var(--color-primary);color:var(--color-background);pointer-events:none}.before-after__badge--before{left:1.5rem}.before-after__badge--after{right:1.5rem}.before-after__handle{position:absolute;top:0;bottom:0;left:var(--percent);width:2px;background-color:var(--color-background);transform:translate(-50%);z-index:4;cursor:ew-resize;pointer-events:none;will-change:left;transition:background-color .2s}.before-after__handle:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;background-color:transparent}.before-after__slider:hover .before-after__handle{background-color:var(--color-foreground)}.before-after__caption{margin-top:1rem;font-family:var(--font-body--family);font-size:var(--label-size);font-weight:var(--font-body--weight-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--before-after-caption, var(--before-after-text, var(--color-foreground)));text-align:left}.before-after__content{display:flex;flex-direction:column;gap:1.5rem}.before-after__subheading{font-family:var(--font-body--family);font-size:var(--label-size);font-weight:var(--font-body--weight-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--color-foreground);margin:0}.before-after__heading{font-family:var(--font-heading--family);font-size:var(--font-h2--size);font-weight:var(--font-heading--weight);font-style:var(--font-heading--style);line-height:var(--font-h3--line-height);color:var(--before-after-heading, var(--before-after-text, var(--color-foreground)));margin:0}.before-after__text{font-family:var(--font-body--family);font-size:var(--font-body--size);line-height:var(--font-body--line-height);color:var(--before-after-text, var(--color-foreground));opacity:.9;margin:0}.before-after__text p{margin:0}.before-after__list-container{display:flex;flex-direction:column}.before-after__list-item{padding:1.25rem 0;border-bottom:1px solid color-mix(in oklab,var(--color-foreground) 15%,transparent);font-family:var(--font-body--family);font-size:14px;color:var(--before-after-text, var(--color-foreground));display:flex;align-items:flex-start;gap:.75rem}.before-after__list-item:first-child{border-top:1px solid color-mix(in srgb,var(--color-olive) 30%,transparent)}.before-after__list-item:before{content:"\2014";display:inline-block;color:inherit;font-weight:var(--font-body--weight)}.before-after__list-item--icon:before{content:none}.before-after__list-icon{flex:none;display:inline-flex;margin-top:.1em;color:inherit}.before-after__list-icon svg,.before-after__list-icon img{display:block;width:16px;height:16px;object-fit:contain}.before-after__list-text{min-width:0}.before-after__button{margin-top:.5rem;align-self:flex-start}.mt-4{margin-top:1.5rem!important}@media screen and (min-width:768px){.before-after__interactive .before-after__button{display:none!important}}@media screen and (max-width:767px){.before-after__content .before-after__button.d-none,.before-after__content .before-after__button.d-non{display:none!important}}@media(min-width:768px){.main-product__grid--layout-artful .product-gallery__slide{aspect-ratio:revert}body .main-product__grid--layout-artful li.product-gallery__slide img{height:auto!important;object-fit:contain;aspect-ratio:revert}body .main-product__grid--layout-artful .product-gallery__slide{display:none}body .main-product__grid--layout-artful .product-gallery__slide.is-active{display:block}}
/*# sourceMappingURL=/cdn/shop/t/4/assets/section-before-after.css.map */