.bgal{margin:36px 0}
/* внутри колонки или рядом с соседями внешние отступы лишние */
.bgal:first-child{margin-top:0}
.bgal:last-child{margin-bottom:0}
.bgal__title{margin:0 0 28px}          /* вид заголовка наследуется от сайта + расстояние до изображений */
.bgal__box{position:relative}
/* запасная картинка до загрузки: та же рамка, чтобы не было скачка */
.bgal > img{display:block;width:100%;height:auto;aspect-ratio:var(--ratio,4/3);
  object-fit:var(--fit,cover);object-position:var(--focus,center)}

.bgal__track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:2px 2px 14px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.bgal__track::-webkit-scrollbar{height:6px}
.bgal__track::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:3px}

/* сколько карточек видно: задается data-per, по умолчанию 4 */
.bgal__item{--n:var(--per,4);flex:0 0 calc((100% - (var(--n) - 1) * 16px) / var(--n));
  scroll-snap-align:start;margin:0}
.bgal__item img{display:block;width:100%;height:auto;aspect-ratio:var(--ratio,4/3);object-fit:var(--fit,cover);object-position:var(--focus,center);
  cursor:zoom-in;transition:transform .2s ease;background:#eef1f5}
.bgal__item img:hover{transform:translateY(-2px)}

.bgal__nav{position:absolute;top:calc(50% - 28px);transform:translateY(-50%);z-index:2;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0}
.bgal__nav--prev{left:-14px}
.bgal__nav--next{right:-14px}
.bgal__nav[disabled]{opacity:0;pointer-events:none}

/* точки под лентой: показывают, что фото несколько */
.bgal__dots{display:flex;justify-content:center;gap:8px;margin-top:10px}
.bgal__dot{width:8px;height:8px;border:0;padding:0;border-radius:50%;background:#cbd5e0;cursor:pointer;transition:background .2s,width .2s}
.bgal__dot--on{background:#0ea5e9;width:22px;border-radius:4px}

@media(max-width:1100px){.bgal__item{--n:min(var(--per,4),3)}}
@media(max-width:860px){.bgal__item{--n:min(var(--per,4),2)}}
@media(max-width:560px){.bgal__item{flex-basis:78%}.bgal__nav{display:none}}