html {
  writing-mode: vertical-lr;
  margin: 3px;
  color: #011627;
  background-color: #011627;
}

ul {
  display: grid;
  grid-gap: 12px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-rows: 14vh;
  grid-auto-flow: dense;
}
li {
  display: block;
  overflow: hidden;
  writing-mode: horizontal-tb;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2vh;
}
h1 {
  font-family: 'Raleway';
  font-size: 10vh;
  margin-top: 6vh;
}
h2 {
  font-family: 'Raleway';
  font-size: 4.5vh;
  margin-top: 3vh;
}
p {
  text-align: center;
  font-family: 'Montserrat';
  font-size: 2.4vh;
}

li:nth-child(3n+2){
  background-color: #017186;
}
li:nth-child(3n+1){
  background-color: #4a746a;
}
li:nth-child(3n){
  background-color: #c8d87b;
}


.span2 { grid-row-end: span 2; }
.span3 { grid-row-end: span 3; }
.span4 { grid-row-end: span 4; }
.span5 { grid-row-end: span 5; }
.span6 { grid-row-end: span 6; }

.height2 { grid-column-end: span 2; }

 @media (max-height:500px) {
   ul {
     grid-gap: 8px;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     grid-auto-rows: 18vh;
   }
   h1 {
     font-size: 21vh;
     margin-top: 4vh;
   }
   p {
     font-size: 4.5vh;
   }
}
 @media (max-height:400px) {
   ul {
     grid-gap: 8px;
     grid-template-columns: 1fr 1fr 1fr;
     grid-auto-rows: 22vh;
   }
   h1 {
     font-size: 20vh;
     margin-top: 5vh;
   }
   p {
     font-size: 5.7vh;
   }
}