Trio de cartes en dégradé

<style>
.bn-trio-gradient {
  /* Recolore tout le composant en changeant juste ces 2 valeurs */
  --gradient-start: #1e293b;
  --gradient-end: #0B0F10;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;

  font-family: 'Inter', sans-serif;
  background: rgba(230, 228, 221, 0.06);
}

.bn-trio-gradient__card {
  padding: 2.5rem 2rem;
  text-align: center;

  background: linear-gradient(160deg, var(--gradient-start), var(--gradient-end));

  --fx-glow: none;
  box-shadow: var(--fx-glow);
  transition: box-shadow 0.3s ease;
}

.bn-trio-gradient.fx-glow .bn-trio-gradient__card {
  --fx-glow: inset 0 0 60px 0 rgba(230, 228, 221, 0.06);
}

.bn-trio-gradient__card--highlight {
  background: linear-gradient(160deg, #334155, var(--gradient-end));
}

.bn-trio-gradient__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 52px;
  height: 52px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  border: 1px solid rgba(230, 228, 221, 0.2);

  font-size: 1.2rem;
}

.bn-trio-gradient__card h3 {
  color: #E6E4DD;
  font-size: 1.05rem;
  margin: 0 0 0.6rem;
}

.bn-trio-gradient__card p {
  color: #979793;
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0 0 1.25rem;
}

.bn-trio-gradient__card a {
  color: #E6E4DD;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
}

.bn-trio-gradient__card a:hover {
  text-decoration: underline;
}

</style>

<section class="bn-trio-gradient" data-fx-root>
  <article class="bn-trio-gradient__card">
    <span class="bn-trio-gradient__icon">📖</span>
    <h3>Cours en ligne</h3>
    <p>Apprenez à votre rythme avec des instructeurs de haut niveau.</p>
    <a href="#">Découvrir →</a>
  </article>

  <article class="bn-trio-gradient__card bn-trio-gradient__card--highlight">
    <span class="bn-trio-gradient__icon">🏛</span>
    <h3>Formation</h3>
    <p>Des programmes académiques pensés pour l'avenir de la créativité.</p>
    <a href="#">Découvrir →</a>
  </article>

  <article class="bn-trio-gradient__card">
    <span class="bn-trio-gradient__icon">👥</span>
    <h3>Travail d'équipe</h3>
    <p>Collaborez avec votre équipe, où que vous soyez.</p>
    <a href="#">Découvrir →</a>
  </article>
</section>