/* Styles for the grid container */
.grid-container {
    display: grid;
    /* Styles for the placement of the grid areas */
    grid-template-areas:
        "nav"
        "header"
        "main"
        "aside"
        "footer";
    gap: 2px;
}
/* Defining the grid areas */
nav {
   grid-area: nav;
   background-color: aquamarine;
   text-align: center;
}
nav li {
   display: inline-block;
   margin: 3px;
}
header {
   grid-area: header;
   background-color: lawngreen;
   text-align: center;
}
main {
   grid-area: main;
   background-color: greenyellow;
   padding: 10px 20px;
}
aside {
   grid-area: aside;
   background-color: mediumspringgreen;
   padding: 10px 20px;
}
aside ul {
   list-style: none;
   padding: 0;
}
footer {
   grid-area: footer;
   background-color: orange;
   text-align: right;
   padding: 10px 20px;
}
p, li, h1, h2, h3, h4 {
   max-width: 60em;
}
ul {
   padding: 0;
}
.active {
   padding: 5px 0;
}
.active:before {
   content: '• ';
}

/* Media queries for the grid container > 500px */
@media only screen and (min-width: 500px) {
   .grid-container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "nav nav"
            "header header"
            "aside main"
            "aside main"
            "footer footer";
   }
}
/* Media queries for the grid container > 1000px */
@media only screen and (min-width: 1000px) {
   .grid-container {
        grid-template-columns: repeat(3,1fr);
        grid-template-areas:
            "nav nav nav"
            "header header header"
            "aside main main"
            "aside main main"
            "footer footer footer";
   }
}