.mdl.md-before-after .ba{position:relative;max-width:var(--ba-w,960px);margin:0 auto;aspect-ratio:var(--ratio,16/10);overflow:hidden;background:var(--stone);user-select:none;touch-action:pan-y;border-radius:var(--radius,0)}
.mdl.md-before-after .ba img,.mdl.md-before-after .ba svg.placeholder-svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mdl.md-before-after .ba .after{clip-path:inset(0 0 0 var(--x,50%))}
.mdl.md-before-after .ba .line{position:absolute;top:0;bottom:0;left:var(--x,50%);width:1px;background:var(--line-c,#fff);pointer-events:none}
.mdl.md-before-after .ba .knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:var(--line-c,#fff);display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.mdl.md-before-after .ba .knob svg{position:static;width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.6}
.mdl.md-before-after .ba .cap{position:absolute;bottom:14px;font-family:var(--sans);font-size:12.5px;color:#fff;background:rgba(31,36,32,.7);padding:5px 10px;pointer-events:none}
.mdl.md-before-after .ba .cap.l{left:14px}.mdl.md-before-after .ba .cap.r{right:14px}
.mdl.md-before-after .ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
@media(max-width:620px){
  .mdl.md-before-after .ba{aspect-ratio:var(--ratio-m,4/3);margin:0 calc(var(--gutter-m) * -1);border-radius:0}
  .mdl.md-before-after .ba .knob{width:36px;height:36px}
  .mdl.md-before-after .ba .cap{font-size:11px;bottom:10px}
}