.timeline ol {
  margin: 0;
  list-style: none;
  padding: 0;
  --hue: 1;
  --unit: 1rem;
}
.timeline h1 {
  text-align: center;
}
.timeline p {
  line-height: 1.3;
  color:white;
}
.timeline .event-date {
  margin: 0 0 1rem;
  font-weight: bold;
  font-size: 20px
}
.timeline .event-description {
  margin: 0;
  font-size: 20px;
}
.timeline li {
  --height: 8rem;
  position: relative;
  display: block;
  /* background-color: hsl(calc(var(--hue)*360/20),90%,65%); */
  /* border-color: hsl(calc(var(--hue)*360/20),90%,65%); */
  padding: 1rem;
  margin: 2rem 0;
  background: #56104c;
}
.timeline li::before {
  content: "";
  background-color: inherit;
  position: absolute;
  display: block;
  width: var(--unit);
  height: var(--unit);
  top: 100%;
  left: calc(50% - (var(--unit)/2));
}
.timeline li::after {
  content: "";
  position: absolute;
  display: block;
  top: calc(100% + var(--unit));
  left: calc(50% - (var(--unit)));
  border: var(--unit) solid transparent;
  border-top-color: #56104c;
}
.timeline li:last-child::before,
.timeline li:last-child::after {
  content: none;
}
.timeline li:nth-child(20n+1){
  --hue: 1;
}
.timeline li:nth-child(20n+2){
  --hue: 2;
}
.timeline li:nth-child(20n+3){
  --hue: 3;
}
.timeline li:nth-child(20n+4){
  --hue: 4;
}
.timeline li:nth-child(20n+5){
  --hue: 5;
}
.timeline li:nth-child(20n+6){
  --hue: 6;
}
.timeline li:nth-child(20n+7){
  --hue: 7;
}

@media (min-width: 550px) and (max-width: 899px){
  .timeline  li {
    margin: 1rem;
    width: calc(50% - 4rem);
    float: left;
    min-height: var(--height);
  }
  .timeline  li:nth-child(4n+3),
  .timeline  li:nth-child(4n+4) {
    float: right;
  }
  .timeline  li:nth-child(4n+1)::before {
    top: calc(var(--height)/2 + var(--unit)/2);
    left: 100%;
  }
  .timeline  li:nth-child(4n+1)::after {
    top: calc(var(--height)/2);
    left: calc(100% + (var(--unit)));
    border: var(--unit) solid transparent;
    border-left-color: inherit;
  }
  .timeline  li:nth-child(4n+3)::before {
    top: calc(var(--height)/2 + var(--unit)/2);
    left: -1rem;
  }
  .timeline  li:nth-child(4n+3)::after {
    top: calc(var(--height)/2);
    left: -3rem;
    border: var(--unit) solid transparent;
    border-right-color: inherit;
  }
}
@media (min-width: 900px) and (max-width: 1199px){
  .timeline  li {
    margin: 1rem;
    width: calc(33.33% - 4rem);
    float: left;
    min-height: 7rem;
  }
  .timeline  li:nth-child(6n+4),
  .timeline  li:nth-child(6n+5),
  .timeline  li:nth-child(6n+6) {
    float: right;
  }
  .timeline  li:nth-child(6n+1)::before,
  .timeline  li:nth-child(6n+2)::before {
    top: calc(var(--height)/2 + var(--unit)/2);
    left: 100%;
  }
  .timeline  li:nth-child(6n+1)::after,
  .timeline  li:nth-child(6n+2)::after {
    top: 3.5rem;
    left: calc(100% + (var(--unit)));
    border: var(--unit) solid transparent;
    border-left-color: inherit;
  }
  .timeline  li:nth-child(6n+4)::before,
  .timeline   li:nth-child(6n+5)::before{
    top: calc(var(--height)/2 + var(--unit)/2);
    left: -1rem;
  }
  .timeline  li:nth-child(6n+4)::after,
  .timeline  li:nth-child(6n+5)::after{
    top: calc(var(--height)/2);
    left: -3rem;
    border: var(--unit) solid transparent;
    border-right-color: inherit;
  }
}
@media (min-width: 1200px){
  .timeline  ol {
    max-width: 1600px;
    margin: 0 auto;
  }
  .timeline  li {
    margin: 1rem;
    width: calc(15% - 1rem);
    float: left;
    min-height: 8rem;
  }

  .timeline li:nth-child(8n+1)::before,
  .timeline li:nth-child(8n+2)::before,
  .timeline li:nth-child(8n+3)::before,
  .timeline li:nth-child(8n+4)::before,
  .timeline li:nth-child(8n+5)::before,
  .timeline li:nth-child(8n+6)::before{
    top: calc(var(--height)/2 + var(--unit)/2);
    left: 100%;
  }
  .timeline  li:nth-child(8n+1)::after,
  .timeline li:nth-child(8n+2)::after,
  .timeline li:nth-child(8n+3)::after,
  .timeline li:nth-child(8n+4)::after,
  .timeline li:nth-child(8n+5)::after{
    top: calc(var(--height)/2);
    left: calc(100% + (var(--unit)));
    border: var(--unit) solid transparent;
    border-left-color: inherit;
  }

}