Grille équipe (avec réseaux)

<style>
.bn-team-social {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;

  padding: 1.5rem;
  font-family: 'Inter', sans-serif;
  background: #0B0F10;
}

.bn-team-social__item {
  text-align: center;
}

.bn-team-social__item img {
  width: 100%;
  aspect-ratio: 6 / 7;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 0.9rem;
  filter: grayscale(20%);
}

.bn-team-social__item h3 {
  color: #E6E4DD;
  font-size: 0.95rem;
  margin: 0 0 0.2rem;
}

.bn-team-social__item span {
  display: block;
  color: #979793;
  font-size: 0.75rem;
  margin-bottom: 0.6rem;
}

.bn-team-social__links {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
}

.bn-team-social__links a {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(230, 228, 221, 0.2);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #979793;
  text-decoration: none;
  font-size: 0.7rem;
}

.bn-team-social__links a:hover {
  border-color: #E6E4DD;
  color: #E6E4DD;
}

</style>

<div class="bn-team-social">
  <article class="bn-team-social__item">
    <img src="https://placehold.co/240x280" alt="Photo d'Alex R." />
    <h3>Alex R.</h3>
    <span>Fondateur &amp; CEO</span>
    <div class="bn-team-social__links">
      <a href="#" aria-label="LinkedIn">in</a>
      <a href="#" aria-label="X">X</a>
    </div>
  </article>

  <article class="bn-team-social__item">
    <img src="https://placehold.co/240x280" alt="Photo de Léa D." />
    <h3>Léa D.</h3>
    <span>Directrice créative</span>
    <div class="bn-team-social__links">
      <a href="#" aria-label="LinkedIn">in</a>
      <a href="#" aria-label="X">X</a>
    </div>
  </article>

  <article class="bn-team-social__item">
    <img src="https://placehold.co/240x280" alt="Photo de Marc T." />
    <h3>Marc T.</h3>
    <span>Lead développeur</span>
    <div class="bn-team-social__links">
      <a href="#" aria-label="LinkedIn">in</a>
      <a href="#" aria-label="X">X</a>
    </div>
  </article>

  <article class="bn-team-social__item">
    <img src="https://placehold.co/240x280" alt="Photo de Sofia K." />
    <h3>Sofia K.</h3>
    <span>Community manager</span>
    <div class="bn-team-social__links">
      <a href="#" aria-label="LinkedIn">in</a>
      <a href="#" aria-label="X">X</a>
    </div>
  </article>
</div>