/* =========================================================
   ДАРСИ — бегущая галерея. Кадры разных пропорций,
   выровнены по нижней границе.
   ========================================================= */

.gal{
  --gal-k:1;                 /* общий множитель высоты кадров */
  position:relative; overflow:hidden;
  padding:clamp(40px,5vw,80px) 0 0;
  background:#0B0B0C;
}

.gal__row{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.gal__track{
  display:flex; align-items:flex-end;      /* всё стоит на одной нижней линии */
  width:max-content; gap:clamp(10px,1vw,18px);
  animation:galMove var(--dur,64s) linear infinite;
  will-change:transform;
}
.gal__track--new{
  --gal-gap:clamp(10px,1vw,18px);
  gap:var(--gal-gap);
  padding-right:var(--gal-gap);
}
@keyframes galMove{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

.gal__item{
  flex:0 0 auto; display:block; margin:0;
  background:#131315; overflow:hidden;
}
.gal__item img{
  display:block; max-width:none;
  height:calc(var(--h) * var(--gal-k)); width:auto;
}

@media (max-width:1200px){ .gal{--gal-k:.78} }
@media (max-width:900px){ .gal{--gal-k:.6} }
@media (max-width:600px){ .gal{--gal-k:.46} }

@media (prefers-reduced-motion:reduce){
  .gal__row{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .gal__track{animation:none}
}