/*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 header"
"nav nav"
"side main"
"footer footer";

grid-template-columns:
150px 1fr;

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

min-height: 100vh;
  }

}

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

	grid-template-columns:
  200px 1fr;

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

	min-height: 100vh;
  }

  /*Main Cluster*/
  .container-main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr ;
    grid-template-rows: 206px 206px 206px 206px;
    text-align: center;
    }
}

/*GRID CONTAINER - IPAD LANDSCAPE - LAPTOP M*/
@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;
  }

  /*Main Cluster*/
  .container-main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr ;
    grid-template-rows: 285px 285px 285px 285px 285px;
    text-align: center;
    }
}