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

/* Il contenitore ha gia `max-width: 100%`, quindi sotto i 1272px di viewport
   (1192 + 2 x 40 di gutter) si stringe da solo: non serve una regola.
   Qui si tocca solo il ritmo verticale, che a 40px fra le voci diventa
   sproporzionato quando le righe si accorciano. */
@media (max-width: 1023px) {
  .use-cases__lista {
    gap: var(--space-4);              /* 32 */
    margin-top: 56px;                 /* era 80 */
  }

  .use-cases .btn-group {
    margin-top: 56px;
  }
}

@media (max-width: 767px) {
  .use-cases__lista {
    gap: var(--space-3);              /* 16 */
    margin-top: 48px;
  }

  .use-cases .btn-group {
    margin-top: 48px;
  }

  /* L'icona resta accanto al testo anche su mobile: e larga 28px, incolonnarla
     sprecherebbe una riga intera per un quadratino. Si riduce solo il gap. */
  .use-case {
    gap: var(--space-2);              /* 8 */
  }
}