html, body {
  height: 100%;
}
html, body, a {
 font-family: 'Abel', Trebuchet MS, Helvetica, sans-serif;
}

.main {
  height: 100%;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns. 1-2-3-4-5 */
  height: 100%; 
}

.box1 {
  background-color: #fff0;
  grid-column: 1/3;
  grid-row: 1/3;
  border: 2px solid #7b79;
  border: 2px solid #dddd;
  margin-left: 0.5vh;
  margin-top: 0.5vh;
}

.box2 {
  grid-column: 3/5;
  grid-row: 1/2;
  border: 2px solid #fc7e;
  border: 2px solid #dddd;
  margin-left: 0.5vh;
  margin-top: 0.5vh;
  margin-right: 0.5vh;
}
.box3 {
  grid-column: 3/5;
  grid-row: 2/3;
  border: 2px solid #fbff;
  border: 2px solid #dddd;
  margin-left: 0.5vh;
  margin-top: 0.5vh;
  margin-right: 0.5vh;
}

.box4 {
  grid-column: 1/4;
  grid-row: 3/5;
  border: 2px solid #55d5;
  border: 2px solid #dddd;
  margin-left: 0.5vh;
  margin-top: 0.5vh;
  margin-bottom: 0.5vh;
}

.box5 {
  grid-column: 4/5;
  grid-row: 3/5;
  border: 2px solid #6aed;
  border: 2px solid #dddd;
  margin: 0.5vh;
}

.box1, .box2, .box3, .box4, .box5 {
  border: 1px solid #ddd7;
}

@media screen and (max-width: 850px) {

  .box1 {
    grid-column: 1/5;
    grid-row: 1/3;
    margin: 0.5vh 0.5vh 0vh 0.5vh;
  }
  .box2 {
   display: none;
  }
  .box3 {
    grid-column: 1/3;
    grid-row: 3/5;
    margin: 0.5vh 0vh 0.5vh 0.5vh;
  }
  .box4 {
   display: none;
  }
  .box5 {
    grid-column: 3/5;
    grid-row: 3/5;
    margin: 0.5vh 0.5vh 0.5vh 0.5vh;
  }
}

/* WHEN THE SCREEN IS SMALL */
@media screen and (max-width: 600px) {

  .box1 {}
  .box2 {}
  .box3 {
    grid-column: 1/5;
    grid-row: 3/5;
    margin: 0.5vh 0.5vh 0.5vh 0.5vh;
  }
  .box4 {}
  .box5 {
    display: none;
  }
}