.partners-grid {
  margin-top: var(--spacing-7);
  display: flex;
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 5%,
    black 95%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 5%,
    black 95%,
    transparent 100%
  );
}

.partners-track {
  display: flex;
  gap: var(--spacing-6);
  flex-wrap: nowrap;
  animation: partners-scroll 30s linear infinite;
}

.partners-grid:hover .partners-track {
  animation-play-state: paused;
}

@keyframes partners-scroll {
  from {
    transform: translateX(0);
  }
  to {
    /* Moves exactly one full set of logos (since the set is duplicated),
       so the loop is seamless */
    transform: translateX(-50%);
  }
}

.partner-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 5px;
}

.partner-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: var(--spacing-4);
}