.api-logo-carousel {
  position: relative;
}

.api-logo-carousel__viewport {
  margin-inline: 2.5rem;
  overflow: hidden;
}

.api-logo-carousel__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform .45s ease;
  will-change: transform;
}

.api-logo-carousel__item {
  display: grid;
  height: 4rem;
  flex: 0 0 50%;
  place-items: center;
}

.api-logo-carousel__item img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  opacity: .78;
  transition: opacity .2s ease, transform .2s ease;
}

.api-logo-carousel__item .api-logo-carousel__logo--wide {
  width: 3.75rem;
  height: 3.75rem;
}

.api-logo-carousel__item img:hover {
  opacity: 1;
  transform: scale(1.08);
}

.api-logo-carousel__control {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}

.api-logo-carousel__control--prev {
  left: .25rem;
}

.api-logo-carousel__control--next {
  right: .25rem;
}

@media (min-width: 640px) {
  .api-logo-carousel__viewport {
    margin-inline: 3rem;
  }

  .api-logo-carousel__item {
    flex-basis: 33.333333%;
  }
}

@media (min-width: 1024px) {
  .api-logo-carousel__item {
    flex-basis: 20%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .api-logo-carousel__track {
    transition: none;
  }
}