@media screen and (max-width: 768px) {
    /* Hide the original header */
    thead { display: none; }

    /* Turn rows into block-style cards */
    tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 1rem;
    }

    /* Make cells look like rows inside the card */
    td {
        display: flex;
        justify-content: space-between;
        border: none !important;
    }

    /* Add labels before the data */
    td::before {
        content: attr(data-label);
        font-weight: bold;
    }
}