.before-after .ba-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px;max-width:none;margin:8px 0 0}
.ba-figure{margin:0;min-width:0}
.ba-slider{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:12px;background:#dce4e9;box-shadow:0 12px 32px #11263b24;isolation:isolate;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.ba-img{position:absolute;inset:0;display:block;width:100%;max-width:none;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.ba-before{z-index:1;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-tag{position:absolute;top:14px;z-index:2;padding:6px 13px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.2;letter-spacing:1.2px;text-transform:uppercase;pointer-events:none;transition:opacity .15s}
.ba-tag-before{left:14px;background:#11263b;color:#fff}
.ba-tag-after{right:14px;background:#d5f77b;color:#11263b}
.ba-slider[data-near-start="true"] .ba-tag-before,.ba-slider[data-near-end="true"] .ba-tag-after{opacity:0}
.ba-range{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;pointer-events:none;-webkit-appearance:none;appearance:none;background:none}
.ba-divider{position:absolute;top:0;bottom:0;left:var(--pos);z-index:2;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px #11263b26;pointer-events:none}
.ba-handle{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:#11263b;box-shadow:0 2px 10px #11263b4d;transform:translate(-50%,-50%)}
.ba-handle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ba-range:focus-visible+.ba-divider .ba-handle{outline:3px solid #11263b;outline-offset:3px}
.ba-figure figcaption{margin-top:14px;color:#132a3d;font-size:15px;font-weight:600;line-height:1.5}
@media(prefers-reduced-motion:reduce){.ba-tag{transition:none}}
@media(max-width:960px){.before-after .ba-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.before-after .ba-list{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.before-after .ba-list{gap:32px}.ba-tag{top:10px;padding:5px 11px;font-size:10px}.ba-tag-before{left:10px}.ba-tag-after{right:10px}.ba-handle{width:40px;height:40px}}