Add new accessible Table component

[markteekman]

table {
    border-collapse: collapse;
    width: 100%;
    display: table;

    @include breakpoint(medium) {
        display: block;
    }

    th,
    td {
        padding: var(--table-cell-padding);
        text-align: left;

        @include breakpoint(medium) {
            padding-inline: 0;
        }
    }

    td {
        display: table-cell;

        @include breakpoint(medium) {
            display: grid;
            grid-template-columns: 1fr 3fr;
            grid-gap: var(--spacing-2);
        }

        &:before {
            font-weight: bold;
            display: none;

            @include breakpoint(medium) {
                display: block;
            }
        }
    }

    th {
        background-color: var(--table-heading-background-color);
        color: var(--table-heading-color);
        font-weight: var(--table-heading-font-weight);
        display: table-cell;

        @include breakpoint(medium) {
            display: none;
        }
    }

    tr {
        padding: 0;
        display: table-row;

        @include breakpoint(medium) {
            padding: var(--table-row-mobile-padding);
            width: 100%;
            display: block;

            &:first-child {
                display: none;
            }
        }

        &:nth-child(even) {
            background-color: var(--table-row-even-background);
        }

        &:nth-child(odd) {
            background-color: var(--table-row-odd-background);
        }
    }
}