.tabella-prezzi {    
    width: 100%;
    border-collapse: collapse;      /* per far aderire i bordi delle celle */
  }
  .tabella-prezzi th,
  .tabella-prezzi td {
    padding: 16px 6px;       /* un po’ di spazio interno */
    text-align: left;               /* o center, a seconda dei casi */
    /* aggiungi qui eventuali colori, bordi, font… */
  }
  
  @media (max-width: 320px) {
    /* Trasforma ogni riga e ogni cella in blocchi a tutta larghezza */
    .tabella-prezzi,
    .tabella-prezzi thead,
    .tabella-prezzi tbody,
    .tabella-prezzi tr,
    .tabella-prezzi th,
    .tabella-prezzi td {
      display: block;
      width: 100%;
      box-sizing: border-box;  /* per includere padding e bordi nel calcolo della larghezza */
    }
  
    /* Un po’ di spazio tra le “righe” di dati */
    .tabella-prezzi tr {
      margin-bottom: 1em;
    }
  }
  
  /* Allinea a destra la colonna Prezzo solo su schermi più larghi di 320px */
  @media (min-width: 321px) {
    /* La terza colonna del prezzo la allineo a destra */
    .tabella-prezzi th:nth-child(3),
    .tabella-prezzi td:nth-child(3) {
      text-align: right;
    }
    /* Aggiungi un bordo inferiore a tutte le righe */
    .tabella-prezzi tr {
      border-bottom: 1px solid #101443;
    }
    /* Evidenzia la riga al passaggio del mouse */
    .tabella-prezzi tbody tr:hover {
      background-color: #ffffff;
    }
  }