Grille de témoignages

<style>
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500&display=swap');

.bn-testi-grid {
  padding: 3rem 1.5rem;
  text-align: center;
  font-family: 'Inter', sans-serif;
  background: #0B0F10;
}

.bn-testi-grid__title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.7rem;
  letter-spacing: 0.02em;
  color: #E6E4DD;
  max-width: 460px;
  margin: 0 auto 2.5rem;
}

.bn-testi-grid__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: rgba(230, 228, 221, 0.06);
}

.bn-testi-grid__card {
  margin: 0;
  padding: 1.75rem 1.5rem;
  text-align: left;
  background: #0B0F10;
}

.bn-testi-grid__card img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: 1rem;
}

.bn-testi-grid__card blockquote {
  margin: 0 0 1.25rem;
  color: #C7C1B7;
  font-size: 0.82rem;
  line-height: 1.55;
}

.bn-testi-grid__card figcaption strong {
  display: block;
  color: #E6E4DD;
  font-size: 0.82rem;
}

.bn-testi-grid__card figcaption span {
  color: #5C6160;
  font-size: 0.75rem;
}

</style>

<section class="bn-testi-grid">
  <h2 class="bn-testi-grid__title">Des milliers de personnes nous font confiance</h2>

  <div class="bn-testi-grid__row">
    <figure class="bn-testi-grid__card">
      <img src="https://placehold.co/56x56" alt="Photo de Sarah J." />
      <blockquote>« Blaig Nova a changé ma façon d'apprendre et de me connecter. Vraiment transformant. »</blockquote>
      <figcaption><strong>Sarah J.</strong><span>Designer</span></figcaption>
    </figure>

    <figure class="bn-testi-grid__card">
      <img src="https://placehold.co/56x56" alt="Photo de Michael T." />
      <blockquote>« Une communauté incroyable, des gens passionnés et talentueux. »</blockquote>
      <figcaption><strong>Michael T.</strong><span>Entrepreneur</span></figcaption>
    </figure>

    <figure class="bn-testi-grid__card">
      <img src="https://placehold.co/56x56" alt="Photo d'Emily R." />
      <blockquote>« La qualité du contenu et des échanges est incomparable. »</blockquote>
      <figcaption><strong>Emily R.</strong><span>Développeuse</span></figcaption>
    </figure>

    <figure class="bn-testi-grid__card">
      <img src="https://placehold.co/56x56" alt="Photo de James L." />
      <blockquote>« Blaig Nova me motive et m'inspire chaque jour un peu plus. »</blockquote>
      <figcaption><strong>James L.</strong><span>Réalisateur</span></figcaption>
    </figure>
  </div>
</section>