.spm {
  --spm-gap: clamp(48px, 6vw, 96px);
  --spm-logo-w: clamp(150px, 12vw, 200px);
  --spm-logo-h: 59px;
  width: 100%;
  padding-block: 40px;
  overflow: hidden;
  background: var(--surface-quinary, #eaedf3);
}

.spm__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.spm__viewport {
  width: 100%;
  overflow: hidden;
}

.spm__track {
  display: flex;
  width: max-content;
  animation: spm-scroll var(--spm-duration, 40s) linear infinite;
  will-change: transform;
}

.spm__group {
  display: flex;
  align-items: center;
  gap: var(--spm-gap);
  padding-inline-end: var(--spm-gap);
}

.spm__logo {
  flex: 0 0 var(--spm-logo-w);
  width: var(--spm-logo-w);
  height: var(--spm-logo-h);
  margin: 0 !important;
}

.spm__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.spm__image {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  filter: grayscale(1);
  transition: filter .25s ease, opacity .25s ease;
}

.spm__link:hover .spm__image,
.spm__link:focus-visible .spm__image { filter: grayscale(0); }

.spm:hover .spm__track,
.spm:focus-within .spm__track { animation-play-state: paused; }

@keyframes spm-scroll {
  to { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 767px) {
  .spm {
    --spm-gap: 40px;
    --spm-logo-w: 144px;
    --spm-logo-h: 48px;
    padding-block: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spm__viewport { overflow-x: auto; }
  .spm__track { animation: none; }
  .spm__group[aria-hidden="true"] { display: none; }
}