/**
*
* Section: Logos 
*
*/

.s-logos {
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.s-logos__row {
  display: flex;
  white-space: nowrap;
}

.s-logos__row.is-hidden {
  display: none;
}

.s-logos__row-content {
  --speed: 80s;
  display: flex;
  flex-direction: row;
  align-items: center;
  animation: marquee var(--speed, 80s) linear infinite var(--direction, forwards);
}

.s-logos__row-content,
.s-logos__row-content[data-direction=forwards] {
  --direction: forwards;
}

.s-logos__row-content[data-direction=reverse] {
  --direction: reverse;
  transform: translateX(0);
}

.s-logos__logo {
  --logo-width: 130px;
  width: var(--logo-width);
  margin-inline: 20px;
  text-align: center;
}

.s-logos__logo img {
  max-width: var(--logo-width);
}