/* Viewport for the logos; JS sets height to one row */
.hmg-logos-slots {
  position: relative;
  overflow: hidden;
}

/* BEFORE restructure (so we can measure columns using your CSS widths) */
.hmg-logos-slots > .client-logo-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Your tile widths define how many columns exist at each breakpoint */
.hmg-logos-slots .flx-col {
  box-sizing: border-box;
  width: 50%;
  padding: 2.5rem;
  transition: opacity 200ms linear;
}

@media (min-width: 768px)  { 
    .hmg-logos-slots .flx-col { 
        width: 33.3333%; 
    } 
}
@media (min-width: 1000px) { 
    .hmg-logos-slots .flx-col { 
        width: 25%; 
    } 
    }
@media (min-width: 1400px) { 
    .hmg-logos-slots .flx-col { 
        width: 20%; 
    } 
}

/* AFTER restructure: one row containing N columns */
.hmg-bandit-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* Column count mirrors what we measured (JS sets --cols) */
.hmg-col {
  flex: 0 0 calc(100% / var(--cols, 4));
}

/* Each column has a fixed viewport (one row tall) */
.hmg-col-track {
  position: relative;
  height: var(--row-h, 80px); /* JS sets exact row height */
  overflow: hidden;           /* safety */
}

/* Stack tiles on top of each other inside the column */
.hmg-col-track .flx-col {
  position: absolute;
  top: 0; 
  left: 0; 
  right: 0;
  width: 100%;
  transform: translateY(-100%); /* default offscreen above */
  will-change: transform;
}

/* Visible tile sits at translateY(0) */
.hmg-col-track .flx-col.is-visible {
  transform: translateY(0);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .hmg-col-track .flx-col { transition: none !important; }
}