.home-customers {
  padding-bottom: 0;
  overflow: hidden;
}
.home-customers-heading {
  border-top: 1px solid #b9b9b9;
  padding-top: 30px;
  margin-bottom: 35px;
}
.home-customers-heading h2 {
  font-size: 30px;
}
.customer-logo-rails {
  display: grid;
  gap: 12px;
}
.customer-logo-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.customer-logo-track {
  --logo-gap: 26px;
  display: flex;
  gap: var(--logo-gap);
  width: max-content;
  animation: customer-logo-flow 76s linear infinite;
}
.customer-logo-viewport--2 .customer-logo-track {
  animation-duration: 72s;
  animation-direction: reverse;
}
.home-customers:not([data-logos-ready]) .customer-logo-track {
  animation-play-state: paused;
}
.customer-logo-set {
  display: flex;
  gap: var(--logo-gap);
  flex: 0 0 auto;
  width: max-content;
  padding: 0;
  margin: 0;
  list-style: none;
}
.customer-logo-item {
  display: grid;
  flex: 0 0 218px;
  place-items: center;
  width: 218px;
  height: 106px;
  background: #fff;
}
.customer-logo-frame {
  display: block;
  width: 190px;
  height: 86px;
  overflow: hidden;
}
.customer-logo-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(var(--logo-zoom, 1));
}
@keyframes customer-logo-flow {
  to {
    transform: translate3d(calc(-50% - var(--logo-gap) / 2), 0, 0);
  }
}
@media (max-width: 760px) {
  .home-customers-heading {
    padding-top: 30px;
    margin-bottom: 35px;
  }
  .customer-logo-rails {
    gap: 5px;
  }
  .customer-logo-track {
    --logo-gap: 16px;
  }
  .customer-logo-item {
    flex-basis: 202px;
    width: 202px;
    height: 98px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .customer-logo-viewport {
    outline: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .customer-logo-track {
    display: block;
    width: auto;
    animation: none;
  }
  .customer-logo-set {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }
  .customer-logo-frame {
    max-width: 100%;
  }
  .customer-logo-set[aria-hidden='true'] {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .customer-logo-item {
    flex-basis: calc((100% - 16px) / 2);
    grid-template-columns: minmax(0, 1fr);
    width: calc((100% - 16px) / 2);
  }
}
