body {
  font-family: Arial, sans-serif;
  margin: 0;  
}

.container {
  margin: 0 auto;
  width: 100%;
}

.grid-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}  

ul {
  list-style: none;
  margin: 30px;
  padding: 0;
}

li {
  align-items: center;
  display: flex;
  font-size: 18px;
  justify-content: center;
  margin: 15px;
  min-width: 290px;
  padding: 60px 0;
  width: calc((100% / 5) - 30px);
  
  &:nth-of-type(1) {
    background-color: #BCD2EE;
  }
  
  &:nth-of-type(2) {
    background-color: #9B7EDE;
  }
  
  &:nth-of-type(3) {
    background-color: #832161;
  }
  
  &:nth-of-type(4) {
    background-color: #F28482;
  }
  
  &:nth-of-type(5) {
    background-color: #76E7CD;
  }
  
  &:nth-of-type(6) {
    background-color: #3F7CAC;
  }
  
  &:nth-of-type(7) {
    background-color: #7BB2D9;
  }
  
  &:nth-of-type(8) {
    background-color: #03B5AA;
  }
  
  &:nth-of-type(9) {
    background-color: #98C9A3;
  }
  
  &:nth-of-type(10) {
    background-color: #E2F89C;
  }
}