:root {
  --logos-width: 100vw;
}

body {
  margin: 0;
  padding: 0;
}

.logos-wrapper {
  position: relative;
  height: 100%;
  margin: auto;
  overflow: hidden;
}

.logos-wrapper::after {
  content: "";
  background: linear-gradient(black, rgba(0, 0, 0, 0.5), black);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.logos {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  justify-content: center;
  gap: 10px;
  width: var(--logos-width);
  animation: slideshow 20s linear infinite;
  transform: translate3d(0, 0, 0);
}

/* Mobile-first: small logos by default */
.logos img {
  display: inline-block;
  height: 35px;
  max-width: 120px;
  margin: 10px 15px;
  object-fit: contain;
}

/* Desktop: larger logos with more spacing */
@media (min-width: 769px) {
  .logos {
    justify-content: space-evenly;
    gap: 0;
  }
  .logos img {
    height: 100px;
    max-width: none;
    margin-top: 50px;
    margin-right: 100px;
    margin-left: 100px;
  }
}

/* Animation */
@keyframes slideshow {
  100% { transform: translateY(-100%); }
}