.tools-section {
  padding-block: 8px;
  background: #181817;
}

#tool-reel {
  container-type: inline-size;
  overflow: hidden;
}

.tool-strip-track { display: flex; }

.tool-strip-logos {
  display: grid;
  flex: 0 0 100%;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  min-height: 52px;
  padding: 0;
  list-style: none;
}

.tool-strip-logos li {
  display: grid;
  width: clamp(31px, 8.6cqw, 40px);
  aspect-ratio: 1;
  place-items: center;
  padding: 5px;
  border-radius: 4px;
  background: #eae5d9;
}

.tool-strip-logos img { width: 100%; max-height: 100%; object-fit: contain; }
.tool-strip-logos[aria-hidden="true"] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  #tool-reel.has-loop {
    mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  }

  .has-loop .tool-strip-track {
    width: max-content;
    animation: tool-strip-loop 32s linear infinite;
  }

  .has-loop .tool-strip-logos { flex-basis: max(490px, 100cqw); width: max(490px, 100cqw); }
  .has-loop .tool-strip-logos[aria-hidden="true"] { display: grid; }
  .is-offscreen .tool-strip-track { animation-play-state: paused; }
}

@media (hover: hover) and (pointer: fine) {
  #tool-reel:hover .tool-strip-track { animation-play-state: paused; }
}

@keyframes tool-strip-loop {
  to { transform: translateX(-50%); }
}