.before-after{padding-block:var(--jm-section-space)}.before-after__list{display:grid;gap:var(--jm-gutter);list-style:none;margin:0;padding:0}.before-after--single .before-after__list{margin-inline:auto;max-width:52rem}@media (min-width:900px){.before-after--grid .before-after__list{grid-template-columns:repeat(2,minmax(0,1fr))}}.before-after__figure{margin:0}.before-after__frame{border-radius:var(--jm-radius);overflow:hidden;position:relative;touch-action:pan-y;user-select:none}.before-after__image{height:100%;inset:0;object-fit:cover;position:absolute;width:100%}.before-after__clip{height:100%;inset:0;overflow:hidden;position:absolute;width:var(--before-after-position,50%)}.before-after__clip .before-after__image{max-width:none;width:var(--before-after-frame-width,100%)}.before-after__divider{bottom:0;left:var(--before-after-position,50%);top:0;transform:translateX(-50%);width:3px}.before-after__divider,.before-after__grip{background-color:var(--jm-white);position:absolute}.before-after__grip{align-items:center;border-radius:var(--jm-radius-pill);box-shadow:0 2px 10px rgba(14,27,38,.35);color:var(--jm-heading);display:flex;height:2.75rem;justify-content:center;left:50%;top:50%;transform:translate(-50%,-50%);width:2.75rem}.before-after__grip svg{height:1.15rem;width:1.15rem}.before-after__range{appearance:none;background:transparent;cursor:ew-resize;height:100%;inset:0;margin:0;position:absolute;width:100%}.before-after__range::-webkit-slider-thumb{appearance:none;height:3rem;width:3rem}.before-after__range::-moz-range-thumb{border:0;height:3rem;opacity:0;width:3rem}.before-after__range:focus-visible{outline:3px solid var(--jm-focus);outline-offset:3px}.before-after__label{background-color:rgba(14,27,38,.72);border-radius:var(--jm-radius-pill);color:var(--jm-white);font-size:.75rem;font-weight:700;letter-spacing:.06em;padding:.35em .85em;position:absolute;text-transform:uppercase;top:.85rem}.before-after__label--before{left:.85rem}.before-after__label--after{right:.85rem}.before-after__caption{margin-top:1rem}.before-after__title{display:block;font-family:var(--jm-font-heading);font-size:1.125rem;font-weight:700}.before-after__meta{display:block;margin-top:.2rem}.jm-invert .before-after__meta{color:hsla(0,0%,100%,.7)}