html{ color-scheme: dark }

body {
    color: #eee;
    font-size: 1.125rem;
    font-family: system-ui;
    line-height: 1.5;
}

.wrapper {
    width: min(900px, 100% - 3rem);
    margin-inline: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: #323232;
}

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

caption, th {
    text-align: left;
}

caption {
    background: hsl(0 0% 0%);
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
}

th {
    background: hsl(0 0% 0% / 0.5);
}

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

@media (max-width: 650px) {
    th {
        display: none;
    }

    td {
        display: grid;
        gap: 0.5rem;
        grid-template-columns: 15ch auto;
        padding: 0.5rem 1rem;
    }

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

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

    td::before {
        content: attr(data-cell) ": ";
        font-weight: 700;
        text-transform: capitalize;
    }

    td::nth-of-type(1)::before{
        content: "Name";
    }

    td::nth-of-type(2)::before{
        content: "Award Amount";
    }

    td::nth-of-type(3)::before {
        content: "Location"
    }

    td::nth-of-type(4)::before {
        content: "Link"
    }    
}