.f-module-client-logos {
  overflow: hidden;
  position: relative;
  padding: 80px 0;
  background-color: #f0f2fa;
}

.f-module-client-logos.type-static {
  display: flex;
  align-items: center;
}

.f-module-client-logos .logo-grid {
  display: inline-flex;
  align-items: center;
  gap: 80px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
}

.f-module-client-logos.type-static .logo-grid {
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: center;
}

.f-module-client-logos.type-scrolling .logo-grid {
  animation: scroll-logos 70s linear infinite;
  will-change: transform;
}

/* no need for ::after pseudo if duplicating logos in markup or JS */
.f-module-client-logos li {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.f-module-client-logos img {
  display: block;
  width: auto;
  max-height: 50px;
  opacity: 0.55;
}

.f-module-client-logos .vertical img {
  max-height: 100px;
}

/* scroll exactly half the width of the doubled list */
@keyframes scroll-logos {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (max-width: 768px) {
  .f-module-client-logos.type-static .logo-grid {
    gap: 40px;
  }

  .f-module-client-logos {
    padding: 40px 0;
  }
  
  .f-module-client-logos img {
    max-height: 30px;
  }

  .f-module-client-logos .vertical img {
    max-height: 80px;
  }

}

/* Optional fade edges for nicer effect */
@supports (mask-image: linear-gradient(white, white)) {
  .f-module-client-logos::before,
  .f-module-client-logos::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    pointer-events: none;
  }

  .f-module-client-logos::before {
    left: 0;
    mask-image: linear-gradient(to right, black, transparent);
    -webkit-mask-image: linear-gradient(to right, black, transparent);
  }

  .f-module-client-logos::after {
    right: 0;
    mask-image: linear-gradient(to left, black, transparent);
    -webkit-mask-image: linear-gradient(to left, black, transparent);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .f-module-client-logos .logo-grid {
    animation: none;
  }
}