.container.ci-partner-logos {
  position: relative;
  padding-top: var(--space-4);
}

.ci-partner-logos__viewport {
  overflow: hidden;
  border-block: var(--border-width-1) solid var(--color-grey-light);
  background: var(--color-white);
}

.ci-partner-logos__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ci-partner-logos__logos li {
  display: grid;
  place-items: center;
  width: clamp(120px, 14vw, 200px);
  flex: 0 0 auto;
  min-height: var(--space-12);
  padding-inline: var(--space-2);
}

.ci-partner-logos__logos a {
  display: grid;
  place-items: center;
  width: 100%;
}

.ci-partner-logos__logos img {
  display: block;
  width: 100%;
  max-width: 126px;
  height: 38px;
  object-fit: contain;
}

.ci-partner-logos__logos[aria-hidden="true"],
.ci-partner-logos__control {
  display: none;
}

.ci-partner-logos__control {
  position: absolute;
  top: 100%;
  inset-inline-end: var(--space-2);
  padding: var(--space-1);
  border: 0;
  background: var(--color-white);
  color: var(--color-black);
  font: inherit;
  font-size: var(--type-caption-size);
  cursor: pointer;
}

.ci-partner-logos__control:focus-visible,
.ci-partner-logos__logos a:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .ci-partner-logos__track:has(li:hover) li:not(:hover) img {
    filter: grayscale(1);
    opacity: 0.55;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ci-partner-logos[data-ready]:not(:has(.ci-partner-logos__logos a:focus-visible)) .ci-partner-logos__track {
    display: flex;
    width: max-content;
    animation-name: ci-partner-logos-roll;
    animation-duration: 53s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .ci-partner-logos[data-ready]:not(:has(.ci-partner-logos__logos a:focus-visible)) .ci-partner-logos__logos {
    display: flex;
    flex-wrap: nowrap;
  }

  .ci-partner-logos[data-ready] .ci-partner-logos__control {
    display: block;
  }

  .ci-partner-logos__control:not(:focus-visible) {
    clip-path: inset(50%);
    pointer-events: none;
  }

  .ci-partner-logos[data-paused] .ci-partner-logos__track,
  .ci-partner-logos__viewport:hover .ci-partner-logos__track,
  .ci-partner-logos__control:focus-visible ~ .ci-partner-logos__viewport .ci-partner-logos__track {
    animation-play-state: paused;
  }
}

@keyframes ci-partner-logos-roll {
  to { transform: translateX(-50%); }
}