@media (max-width: 640px) {
    table {
        border: 0;
    }

    /* Hide the table header row */
    thead {
        display: none;
    }

    /* Make each row a card */
    tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #ddd;
    }

    /* Make cells stack */
    tbody td {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem !important;
        text-align: right;
    }

    /* Show the header label */
    tbody td::before {
        content: attr(data-label);
        font-weight: bold;
        text-align: left;
    }

    /* Stack label and content for dense, single-column tables */
    .table--stacked tbody td {
        align-items: flex-start;
        flex-direction: column;
        text-align: left;
    }

    .table--stacked tbody td::before {
        display: block;
        margin-bottom: 0.25rem;
    }
}