body {
    font-family: Helvetica, sans-serif;
    background-color: grey;
}

b {
    color: red;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.container {
    margin: 30px;
    padding: 15px;
    border: 5px solid navy;
    background-color: ivory;
    display: grid;
    gap: 15px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    justify-content: space-around;
    grid-template-areas: 
        "h"
        "s"
        "c"
        "f";
}

header {
    grid-area: h;
    background-color: navy;
    color: ivory;
    padding-left: 20px;
}

.showcase {
    grid-area: s;
    justify-self: center;
}

.content {
    grid-area: c;
    justify-self: center;
}

footer {
    grid-area: f;
    justify-self: center;
}

img {
    width: 300px;
}

@media (min-width: 700px) {
    .container {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas: 
            "h h h"
            "s c c"
            "f c c";
    }

}

@media (min-width: 1700px) {
    .container {
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas: 
            "h h h h"
            "s c c f";
    }

    img {
        width: 400px;
    }

}