.user-info {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 20px;
  
    align-items: start;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 0 auto;
    max-width: 600px;
    min-width: 280px; /* 👈 minimo spazio visibile */
  }
  
  .user-info img {
    border-radius: 100% !important;
    width: 100px;
    height: auto;
  }
  
  .user-info h2 {
    grid-column: 1 / -1; /* intestazione su tutta la larghezza */
  }
  
  /* 🔁 Responsive: immagine sopra i contenuti sotto */
  @media (max-width: 500px) {
    .user-info {
      grid-template-columns: 1fr; /* una sola colonna */
      text-align: center;         /* opzionale, migliora su mobile */
    }
  
    .user-info img {
      margin: 0 auto;  
      width: 50%;           /* centra immagine su mobile */
    }
  }