/* Container for the entire animation */
.logo-carousel-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* display: grid;
  gap: max(1vw, 0.625rem); */
  padding: 2rem 0;
}

/* Each row container */
.logo-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  /* overflow: hidden; */
  animation: side-slide var(--slide-time) linear infinite;
  margin-bottom:10px;
}

/* Individual logo card */
.logo-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: white;
  border-radius: 0.5rem;
  margin: 0 10px;
  /* animation: slide-in var(--slide-time) linear infinite;
  animation-delay: var(--anim-delay); */
}


/* Logo images */
.logo-image {
  max-width: 200px;
  max-height: 100%;
  object-fit: contain;
}

/* Keyframes for sliding animation */
@keyframes side-slide {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Keyframes for staggered animation */
@keyframes slide-in {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Media queries for responsive behavior */
@media (min-width: 768px) {
  .logo-card {
    padding: 2rem;
  }
}