.main {
  height: 100vh;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.grid {
  display: grid;
  height: 100%;
  justify-content: center;
  align-content: center;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  text-align:center;
}
.grid a{color:#fff;text-decoration:none;display:inline-block;margin:16px 0 0 0;}
@media screen and (min-width: 700px) {
  .grid {
    grid-template-columns: 10px 70px 10px 50px 10px 50px 10px 40px 10px 90px 10px;
    grid-template-rows: 10px 50px 15px 10px 15px 10px 15px 10px 30px 20px 10px;
    grid-gap: unset;
  }
}

.block {
  padding-bottom: 66%;
}
@media screen and (min-width: 700px) {
  .block {
    padding-bottom: unset;
  }
}

.one {
  background-color: #bee3f8;
}
@media screen and (min-width: 700px) {
  .one {
    grid-area: 2 / 2 / 4 / 5;
  }
}

.two {
  background-color: #2c5282;
}
.two a{margin:0;}

@media screen and (min-width: 700px) {
  .two {
    grid-area: 1 / 6 / 6 / 9;
  }
}

.three {
  background-color: #3182ce;
}
@media screen and (min-width: 700px) {
  .three {
    grid-area: 3 / 10 / 8 / 12;
  }
}

.four {
  background-color: #4299e1;
}
@media screen and (min-width: 700px) {
  .four {
    grid-area: 5 / 1 / 11 / 3;
  }
}

.five {
  background-color: #90cdf4;
}
@media screen and (min-width: 700px) {
  .five {
    grid-area: 7 / 4 / 10 / 7;
  }
}

.six {
  background-color: #2a4365;
}
@media screen and (min-width: 700px) {
  .six {
    grid-area: 9 / 8 / 12 / 11;
  }
}