/* desktop devices */
@media (min-width: 768px) {
    body {
        grid-template:
        "head head"
        "nav  main"
        "nav  foot";
    }

    aside {
        width: 250px;
    }
}

/* mobile devices */
@media (max-width: 768px) {
    body {
        grid-template:
        "head"
        "nav"
        "main"
        "foot";
    }

    aside {
        width: 100%;
    }
}

body {
    --accent-color: #d26c6c;

    background-color: #e3e3e3;
    accent-color: var(--accent-color);

    display: grid;
}

header {
    grid-area: head;
}

aside {
    background-color: white;

    grid-area: nav;

    text-align: center;
}

article {
    background-color: white;

    grid-area: main;
}

footer {
    background-color: white;

    grid-area: foot;
}