.ba-root-el { display:block; max-width:800px; margin:30px auto; position:relative; min-height:400px; background:#000; }
.ba-box-el { position:relative; width:100%; height:100%; overflow:hidden; border-radius:16px; box-shadow:0 8px 20px rgba(0,0,0,.12); }
.ba-img-el { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block; }
.ba-img-el.before { z-index:1; }
.ba-img-el.after { z-index:2; width:50%; }
.ba-handle-el { position:absolute; top:0; left:50%; transform:translateX(-50%); width:40px; height:100%; cursor:ew-resize; z-index:3; display:flex; justify-content:center; align-items:center; }
.ba-knob-el { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,0.9); box-shadow:0 4px 15px rgba(0,0,0,.25); display:flex; justify-content:center; align-items:center; font-weight:600; }
@media(max-width:600px){ .ba-knob-el{width:32px;height:32px;font-size:14px;} .ba-root-el{min-height:300px;} }