@media  screen and (max-width: 576px) {
    body {
        grid-template-rows: 7rem auto 4rem;
    }

    article.text {
        margin-bottom: 1rem;
    }

    #table-snippets thead {
        display: none;
    }

    #table-snippets tbody, 
    #table-snippets tr, 
    #table-snippets td {
        display: block;
        width: 100%;
    }


    #table-snippets {
        border: none;
    }

    #table-snippets tr {
        margin-bottom: 1rem;
    }

    #table-snippets td {
        position: relative;
        text-align: right;
        padding-left: 50%;
    }

    #table-snippets td:nth-child(1){
        background-color: var(--black);
        color: var(--gainsboro);
    }

    #table-snippets td:nth-child(1)::before{
        color: var(--gold);
    }

    #table-snippets td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 50%;
        text-align: left;
        padding-left: 5px;
        font-weight: bold;
    }

}