aside {
    text-align: center;
}

aside img {
    width: 100px;
    display: block;
    margin: auto;
    border: 1px solid;
}


header,
section,
article,
aside {
    border: 2px solid;
}

body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
        "header header header header"
        "aside main main main"
        "footer footer footer footer";
    /* grid-template-areas:
        "header header header header"
        "aside article article article"
        "aside article article article"
        "aside article article article"
        "aside article article article"
        "footer footer footer footer";
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; */
    gap: 10px;
    background-image: url('img/pizza.jpg');
    height: 100vh;
}

@media (width<500px) {
    body {
        grid-template-areas: "header" "main" "footer";
        grid-template-columns: 1fr;
    }

    aside {
        display: none;
    }

    article img {
        display: none;
    }
}

header {
    padding: 10px;
    grid-area: header;
    text-align: center;
    border-radius: 15px;
    box-shadow: 5px 5px 5px black;
    color: white;
    text-shadow: 2px 2px 2px black;
}

aside {
    grid-area: aside;
    background-color: rgb(207, 204, 204);
    padding: 10px;
}

main {
    grid-area: main;
}

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

article {
    grid-area: article;
    height: 180px;
    padding: 5px;
    overflow-y: auto;
    margin: 10px;
    background-color: grey;
}

article img {
    /* As easy as floating down a stream... */
    height: 100%;
    float: left;
}