.logo-slider {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  padding: 20px 0;
  height: 140px; /* fit logos comfortably */
  display: flex;
  align-items: center; /* vertical center */
}

.logo-slider-wrapper {
  display: flex;
  align-items: center; /* vertical center */
  height: 135px;
  width: 100%;
  overflow: hidden;
}

.logo-slider-track {
  display: flex;
  align-items: center;
  gap: 60px;
  width: calc(125px * 12 * 2 + 60px * 12 * 2); /* 12 logos * 2 sets, with gaps */
  animation: scroll 20s linear infinite;
}

.logo-item {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 125px;
}

.logo-item img {
  max-height: 125px;
  object-fit: contain;
  transition: transform 0.3s ease;
  display: block;
}

.logo-item img:hover {
  transform: scale(1.1);
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50%));
  }
}