ul {
	column-gap: 10px;
	column-width: 150px;
	counter-reset: item;
	list-style: none;
	margin: 1em auto;
	max-width: 800px;
	padding: 0px;
	width: 100%;
}

li {
    -webkit-column-break-inside: avoid;
}

li {
   align-items: stretch;
   box-sizing: border-box;
   column-break-inside: avoid;
   counter-increment: item;
   display: flex;
   justify-content: center;
   padding-bottom: 5px;
   
   &:after {
      align-items: center;
      background: rgba(200,86,52,1);
      border-radius: px;
      box-shadow: inset 0 -3px 0 rgba(0,0,0,0.3), 
                  2px 2px 3px rgba(0,0,0,0.3);
      content: counter(item);
      color: white;
      display: flex;
      flex: 1;
      font-size: 2em;
      justify-content: center;
      text-shadow: 2px 2px 1px rgba(0,0,0,0.3);
   }
   
   &:nth-child(even) {
      height: 200px;
      
      &:after {
         background: #17729D;
      }
   }
   
   &:nth-child(3n) {
      height: 150px;
      
      &:after {
         background: rgb(106,165,60);
      }
   }
}