Logos clients

<style>
.logos-clients {
  padding: 3rem 1.5rem;
  text-align: center;
  font-family: sans-serif;
}

.logos-clients__label {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 1.5rem;
}

.logos-clients__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
}

.logos-clients__row img {
  height: 32px;
  width: auto;

  /* Logos en gris par défaut, retrouvent leur couleur au survol :
     un classique pour ne pas surcharger visuellement la bande */
  filter: grayscale(100%);
  opacity: 0.6;

  transition:
    filter 0.25s ease,
    opacity 0.25s ease;
}

.logos-clients__row img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

</style>

<div class="logos-clients">
  <p class="logos-clients__label">Ils nous font confiance</p>
  <div class="logos-clients__row">
    <img src="https://placehold.co/120x40?text=Logo+1" alt="Logo client 1" />
    <img src="https://placehold.co/120x40?text=Logo+2" alt="Logo client 2" />
    <img src="https://placehold.co/120x40?text=Logo+3" alt="Logo client 3" />
    <img src="https://placehold.co/120x40?text=Logo+4" alt="Logo client 4" />
  </div>
</div>