.before-after__layout{display:grid;gap:var(--space-6)}.before-after__layout--single{align-items:center}@media(min-width:750px){.before-after__layout--single{grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px)}.before-after__layout--flip .before-after__item{order:2}.before-after__layout--grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-5)}}.before-after__body{display:grid;justify-items:start;gap:var(--space-5)}.before-after__body .section-heading{margin-block-end:0}.before-after__points{display:grid;gap:var(--space-2);list-style:none;padding:0}.before-after__points li{display:flex;align-items:center;gap:var(--space-3);color:var(--color-heading);font-weight:var(--font-body-weight-semibold)}.before-after__points .icon{inline-size:22px;block-size:22px;padding:4px;border-radius:50%;background:var(--color-brand);color:var(--color-on-brand);stroke-width:3}.before-after__caption{margin-block-start:var(--space-3);color:var(--color-muted);font-size:var(--fs-sm);text-align:center}.ba{display:block}.ba__media{position:relative;overflow:hidden;aspect-ratio:var(--ratio, 1/1);border-radius:var(--radius-image);background:var(--color-surface);touch-action:pan-y;-webkit-user-select:none;user-select:none}.ba__layer{position:absolute;top:0;right:0;bottom:0;left:0}.ba__layer img,.ba__layer svg{inline-size:100%;block-size:100%;object-fit:cover}.ba__layer--before{clip-path:inset(0 calc(100% - var(--position, 50%)) 0 0)}[dir=rtl] .ba__layer--before{clip-path:inset(0 0 0 calc(100% - var(--position, 50%)))}.ba__placeholder-before{filter:grayscale(1) contrast(.9)}.ba__label{position:absolute;inset-block-start:var(--space-3);z-index:2;padding:4px 8px;border-radius:var(--radius-badge);background:var(--color-heading);color:var(--color-bg);font-size:.6875rem;font-weight:var(--font-body-weight-bold);letter-spacing:.08em;text-transform:uppercase;pointer-events:none}.ba__label--after{background:var(--color-brand);color:var(--color-on-brand)}.ba__label--before{inset-inline-start:var(--space-3)}.ba__label--after{inset-inline-end:var(--space-3)}.ba__handle{position:absolute;inset-block:0;inset-inline-start:var(--position, 50%);z-index:2;inline-size:2px;margin-inline-start:-1px;background:var(--color-bg);pointer-events:none}.ba__knob{position:absolute;inset-block-start:50%;inset-inline-start:50%;display:flex;align-items:center;justify-content:center;inline-size:40px;block-size:40px;border-radius:var(--radius-arrow);background:var(--color-mark);color:var(--color-on-mark);box-shadow:var(--shadow-raised);transform:translate(-50%,-50%)}[dir=rtl] .ba__knob{transform:translate(50%,-50%)}.ba__knob .icon{inline-size:16px;block-size:16px;margin-inline:-3px}.ba__knob .ba__chev-start{transform:scaleX(-1)}[dir=rtl] .ba__knob .ba__chev-start{transform:none}.ba__range{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;inline-size:100%;block-size:100%;margin:0;opacity:0;cursor:ew-resize;appearance:none;-webkit-appearance:none}.ba__range::-webkit-slider-thumb{-webkit-appearance:none;inline-size:48px;block-size:100vh}.ba__range::-moz-range-thumb{inline-size:48px;block-size:100vh;border:0}.ba__range:focus-visible+.ba__handle,.ba:focus-within .ba__knob{outline:2px solid var(--color-link);outline-offset:2px}
/*# sourceMappingURL=/cdn/shop/t/22/assets/section-before-after.css.map */