@media (1px <=width < 768px) {

    .responsive-table-container {
        max-width: 100%;
        overflow-x: auto;
        margin-inline: auto;
        width: min(900px, 100% - 3rem);

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        caption,
        th,
        td {
            padding: 1rem;
        }

        caption {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            text-align: left;
        }

        tr:nth-of-type(2n) {
            background-color: hsl(0 0% 0% / 0.1);
        }

        th {
            display: none;
            background-color: hsl(0 0% 0% / 0.5);
            /* text-transform: capitalize; */
            text-align: left;
        }

        td {
            padding: 0.5em 1rem;
            border-bottom: 1px solid #f0f0f0;
        }

        td:first-child {
            padding-top: 2rem;
        }

        td:last-child {
            padding-bottom: 2rem;
        }

        td.using-attr:before {
            content: attr(data-label) ": ";
            float: left;
            font-weight: 700;
        }

        td.using-css:nth-of-type(1)::before {
            content: "full name";
        }

        td.block-on-mobile {
            display: block;
        }

        td.grid-on-mobile {
            display: grid;
            grid-template-columns: 15ch auto;
            gap: 0.5rem;
        }
    }
}