/*General*/
body {
  font-family: Arial, Helvetica, sans-serif;
}

/*GRID AREAS*/
.container-header {grid-area: header}
.container-navigation {grid-area: nav}
.container-side {grid-area: side}
.container-main {grid-area: main}
.container-footer {grid-area: footer}

/*GRID CONTAINER - SMALL SMARTHPHONE - THREE COLUMNS STACK ON TOP OF EACH OTHER WHEN SMALL SCREEN*/
.grid-container {
  display: grid;
  grid-template-areas: "header"
                       "nav"
                       "main"
                       "footer";

  grid-template-columns: 100%;
  grid-template-rows:
            50px
            20px
            1fr
            30px;
}

/*GRID CONTAINER - IPAD*/
@media (min-width: 768px) {
.grid-container {
display: grid;
grid-template-areas:
"header"
"nav"
"main"
"footer";

grid-template-columns:
100%;

grid-template-rows:
100px
20px
1fr
30px;

min-height: 100vh;
}
}

/*GRID CONTAINER - IPAD LANDSCAPE - LAPTOP S*/
@media (min-width: 1024px) {
.grid-container {
  display: grid;
	grid-template-areas:
   "header header"
   "nav nav"
   "side main"
   "footer footer";

	grid-template-columns:
  300px 1fr;

	grid-template-rows:
  200px
  30px
  1fr
  30px;

	min-height: 100vh;
  }

}

/*GRID CONTAINER - IPAD LANDSCAPE - LAPTOP L*/
@media (min-width: 1440px) {
.grid-container {
  display: grid;
	grid-template-areas:
   "header header"
   "nav nav"
   "side main"
   "footer footer";

	grid-template-columns:
  300px 1fr;

	grid-template-rows:
  200px
  30px
  1fr
  30px;

	min-height: 100vh;
  }

}