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

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

.grid-container {
  @supports (display: grid) {
    display: grid;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  }
}  

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

li {
  align-items: center;
  display: flex;
  font-size: 18px;
  justify-content: center;
  padding: 60px 0;
  
  &:nth-of-type(1) {
    background-color: #8BE8CB;
  }
  
  &:nth-of-type(2) {
    background-color: #7EBCE6;
  }
  
  &:nth-of-type(3) {
    background-color: #B18FCF;
  }
  
  &:nth-of-type(4) {
    background-color: #8980F5;
  }
  
  &:nth-of-type(5) {
    background-color: #3066BE;
  }
  
  &:nth-of-type(6) {
    background-color: #EDFFAB;
  }
  
  &:nth-of-type(7) {
    background-color: #FFAF87;
  }
  
  &:nth-of-type(8) {
    background-color: #ED6A5E;
  }
  
  &:nth-of-type(9) {
    background-color: #4CE0B3;
  }
  
  &:nth-of-type(10) {
    background-color: #119DA4;
  }
}