.ba{margin:36px 0}
.ba__inner{max-width:1220px;margin:0 auto;padding:0 16px}
.ba__title{font-size:32px;font-weight:700;text-align:center;margin:0 0 8px}
.ba__subtitle{color:#4b5563;text-align:center;margin:0 0 20px}

.ba-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.ba-item{position:relative;border-radius:14px;overflow:hidden;background:#f3f4f6;user-select:none}
.ba-img{width:100%;height:100%;object-fit:cover;display:block}
.ba-after{position:absolute;top:0;left:0;height:100%;overflow:hidden}
.ba-handle{position:absolute;top:50%;transform:translate(-50%,-50%);left:50%;width:36px;height:36px;border-radius:50%;border:0;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.2);cursor:ew-resize;display:flex;align-items:center;justify-content:center}
.ba-handle span{display:block;width:14px;height:14px;background:linear-gradient(90deg,#1f2937 0 30%,transparent 30% 70%,#1f2937 70% 100%);mask:radial-gradient(circle at 50% 50%,#000 45%,transparent 46%)}
.ba-tag{position:absolute;bottom:10px;padding:6px 12px;border-radius:999px;background:rgba(15,23,42,.85);color:#fff;font-size:13px}
.ba-tag--before{left:10px}
.ba-tag--after{right:10px}