/* ==========================================================================
   Blocco FEATURES — responsive
   PROVVISORIO. Nessuna riga fuori da @media.
   ========================================================================== */

/* --- <= 1511 · l'immagine smette di essere 400 fissi ----------------------
   400 su una card larga 708 e il rapporto 660:400 del contenuto (708 meno i
   2 x 24 di padding), cioe 1.65:1. Tenendo il rapporto invece dell'altezza,
   la card si rimpicciolisce mantenendo le proporzioni del mockup. */
@media (max-width: 1511px) {
  .feature-card__media {
    height: auto;
    aspect-ratio: 660 / 400;
  }
}

/* --- <= 1023 · una colonna ------------------------------------------------
   A 1024 due colonne lasciano a ogni card circa 460px: l'immagine diventa
   280px di altezza e il titolo a 28px va su tre righe. Meglio una card sola
   per riga, grande e leggibile, e accettare che la sezione diventi lunga:
   sono capacita di prodotto, si scorrono. */
@media (max-width: 1023px) {
  .features__griglia {
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--space-4);
  }

  .features .btn-group {
    margin-top: var(--space-4);
  }
}

@media (max-width: 767px) {
  .feature-card {
    gap: var(--space-4);              /* 32 invece di 40 */
    padding: var(--space-3);          /* 16 invece di 24 */
  }

  .feature-card__media {
    aspect-ratio: 4 / 3;
  }
}