.a {
    display: grid;
    width: 800px;
    grid-gap: 2px;
    border: solid black 2px;
    background-color: black;
    grid-template-columns: 200px auto 200px;
    grid-template-areas:
        'h h ac'
        's a ac'
        'f f f';
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

header {
    background-color: lightcoral;
    text-align: center;
    font-size: 50px;
    padding: 10px;
    grid-area: h;
}

article {
    background-color: white;
    padding: 10px;
    grid-area: a;
}

section.c {
    background-color: greenyellow;
    grid-area: s;
    display: flex;
    justify-content: center;
}

section div {
    display: flex;
    flex-direction: column;
    background-color: white;
    border: solid black 2px;
    height: 180px;
    width: 180px;
    text-align: left;
    margin: 10px;
    text-align: center;

    a:hover {
        background-color: lime;
    }

    a {
        display: flex;
        background-color: gray;
        border: solid black 1px;
        margin: 10px;
        margin-right: 10px;
        margin-top: 0px;
        margin-bottom: 0px;
        width: 160px;
        height: 30px;
        align-items: center;
        justify-content: center;
        color: black;
        text-decoration: none;
    }
}

#röd {
    background-color: red;
    text-decoration: underline red;
}

aside.c {
    display: flex;
    flex-direction: column;
    background-color: yellow;
    grid-area: ac;
    align-items: center;
    text-align: center;
    font-size: 20px;
}

aside div {
    width: 125px;
    height: 50px;
    background-color: white;
    border: solid red 2px;
    text-align: center;
    margin: 10px;
    font-size: medium;
    padding: 5px;
}

nav {
    background-color: lightgray;
}

footer {
    background-color: gray;
    grid-area: f;
    text-align: center;
}

footer b {
    font-size: 50px;
}

img {
    border: solid black 2px;
    width: 200px;
    height: 150px;
}


@media (max-width: 768px) {
    .a {
        width: auto;
        grid-gap: 2px;
        border: solid black 2px;
        background-color: black;
        grid-template-columns: 200px auto;
        grid-template-areas:
            'h h '
            's a '
            'f f '
    }

    aside.c {
        display: none;
    }
}

@media (max-width:600px) {
    .a {
        width: auto;
        grid-gap: 2px;
        border: solid black 2px;
        background-color: black;
        grid-template-columns: auto;
        grid-template-areas:
            'h '
            's '
            'a '
            'f ';
    }

    aside.c {
        display: none;
    }
}