/* track with gap; JS reads this gap */
.logo-track {
    display: flex;
    gap: 20px;             /* adjust spacing here */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.logo-track::-webkit-scrollbar { display: none; }

/* Desktop: 7 visible (6 gaps) */
.logo-item {
    flex: 0 0 calc((100% - (20px * 6)) / 7);
    scroll-snap-align: start;
}

/* ≤1024px: 4 visible (3 gaps) */
@media (max-width: 1024px) {
    .logo-item { flex-basis: calc((100% - (20px * 3)) / 4); }
}

/* ≤768px: 2 visible (1 gap) */
@media (max-width: 768px) {
    .logo-item { flex-basis: calc((100% - 20px) / 2); }
}