.ba-frame{margin:0}
.ba-wrap{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2)}
.ba-img{width:100%;height:100%;object-fit:cover;display:block}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-before img{filter:sepia(.45) saturate(.7) brightness(.93)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;box-shadow:0 0 14px rgba(0,0,0,.35)}
.ba-handle{position:absolute;top:50%;left:var(--pos);transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.3)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5}
.ba-tag{position:absolute;top:14px;z-index:4;background:rgba(25,68,82,.85);color:#fff;padding:.35rem .8rem;border-radius:99px}
.ba-tag.r{right:14px;background:rgba(40,135,107,.9)}.ba-tag.l{left:14px}
.ba-frame figcaption{margin-top:.8rem}