table {
    width: 100%;
    border-collapse: collapse;
}
tr:nth-of-type(odd) {
    background: rgba(var(--tertiary-hex-color),0.2);
}
.pricing tr:nth-of-type(odd) {
    background: unset;
}
th {
    background: var(--tertiary-color);
    color: white;
    font-weight: 700;
    text-align: center !important;
}
td,
th {
    border: 0px solid #ccc;
    text-align: left;
}
@media only screen and (max-width: 768px) {
    table,
    thead,
    tbody,
    th,
    td,
    tr {
      display: block;
    }
    
    /* Hide the original table header */
    thead {
      display: none;
    }
    th {
        background: var(--quinary-color);
        color: white;
        font-weight: 700;
        text-align: center !important;
    }
    
    /* Each row becomes a block container */
    tbody tr {
      margin-bottom: 1rem;
      border-bottom: 1px solid #eee;
      padding: 0.5rem 0;
    }
    tbody tr:nth-of-type(odd) {
        background: rgba(var(--tertiary-hex-color),0.2);
    }

    /* Make the table cell a block-level element and remove left padding */
    tbody tr td {
      display: block;
      padding: 0.5rem;
      text-align: left;
      border: none;
      border-bottom: 1px solid #eee;
    }
    
    /* Insert the header label before the cell content */
    tbody tr td::before {
      content: attr(data-label);
      display: block;           /* This makes it part of the flow */
      font-weight: bold;
      margin-bottom: 0.5rem;
      white-space: normal;      /* Allow wrapping */
      overflow-wrap: break-word;/* Ensure long words break */
    }
}