#grid-container {
    display: grid;
    grid-template-columns: repeat(6, minmax(50px, auto));
    grid-template-rows: repeat(5, minmax(50px, auto));
    grid-auto-rows: minmax(50px, auto);
    grid-gap: 20px;
    width: 95%;
    height: 100%;
    padding: 10px;
    grid-template-areas: 'h h h cn cn cn' 'h h h cn cn cn' 'ci ci ci cc cc cc' 'ci ci ci cc cc cc' 'f f f f f f';
}

header {
    grid-area: h;
    margin: auto;
    width: 100%;
}

.comic-nav {
    grid-area: cn;
    text-align: center;
    height: 60px;
}

.comic-image {
    grid-area: ci;
}

.comic-image img {
    width: 80%;
    margin-left: 50px;
}

.comic-content {
    grid-area: cc;
    margin-right: 100px;
}

footer {
    grid-area: f;
}

/* Mobile view */

@media (max-width: 900px) {
    #grid-container {
        grid-template-columns: auto;
        grid-auto-rows: minmax(50px, auto);
        grid-template-areas: 'h' 'cn' 'ci' 'cc' 'f';
    }
    .comic-image {
        max-width: 400px;
        margin: auto;
    }
    .comic-content {
        margin-right: auto;
    }
}