ol {
    margin: 0;
    list-style: none;
    padding: 0;
    --hue: 1;
    --unit: 1rem;
  }

  .event-date {
    margin: 0 0 0.25rem;
    font-weight: bold;
  }
  .event-description {
    margin: 0;
    font-size: 20px;
    font-weight: bold;
  }
  li.arrow-list {
    --height: 7rem;
    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;
    display: flex;
    align-items: center;
  }
  li.arrow-list::before {
    content: "";
    background-color: inherit;
    position: absolute;
    display: block;
    width: var(--unit);
    height: var(--unit);
    top: 100%;
    left: calc(50% - (var(--unit)/2));
  }
  li.arrow-list::after {
    content: "";
    position: absolute;
    display: block;
    top: calc(100% + var(--unit));
    left: calc(50% - (var(--unit)));
    border: var(--unit) solid transparent;
    border-top-color: inherit;
  }
  /* li:last-child::before,
  li:last-child::after {
    content: none;
  } */
  li.arrow-list:nth-child(20n+1){
    --hue: 1;
  }
  li.arrow-list:nth-child(20n+2){
    --hue: 2;
  }
  li.arrow-list:nth-child(20n+3){
    --hue: 3;
  }
  li.arrow-list:nth-child(20n+4){
    --hue: 4;
  }
  li.arrow-list:nth-child(20n+5){
    --hue: 5;
  }
  li.arrow-list:nth-child(20n+6){
    --hue: 6;
  }
  li.arrow-list:nth-child(20n+7){
    --hue: 7;
  }
  li.arrow-list:nth-child(20n+8){
    --hue: 8;
  }
  /* li.arrow-list:nth-child(20n+9){
    --hue: 9;
  }
  li.arrow-list:nth-child(20n+10){
    --hue: 10;
  }
  li.arrow-list:nth-child(20n+11){
    --hue: 11;
  }
  li.arrow-list:nth-child(20n+12){
    --hue: 12;
  }
  li:nth-child(20n+13){
    --hue: 13;
  }
  li:nth-child(20n+14){
    --hue: 14;
  }
  li:nth-child(20n+15){
    --hue: 15;
  }
  li:nth-child(20n+16){
    --hue: 16;
  }
  li:nth-child(20n+17){
    --hue: 17;
  }
  li:nth-child(20n+18){
    --hue: 18;
  }
  li:nth-child(20n+19){
    --hue: 19;
  }
  li:nth-child(20n+20){
    --hue: 20;
  } */
  @media (min-width: 550px) and (max-width: 899px){
    li.arrow-list {
      margin: 1rem;
      width: calc(50% - 4rem);
      float: left;
      min-height: var(--height);
    }
    li.arrow-list:nth-child(4n+3),
    li.arrow-list:nth-child(4n+4) {
      float: right;
    }
    li.arrow-list:nth-child(4n+1)::before {
      top: calc(var(--height)/2 + var(--unit)/2);
      left: 100%;
    }
    li.arrow-list:nth-child(4n+1)::after {
      top: calc(var(--height)/2);
      left: calc(100% + (var(--unit)));
      border: var(--unit) solid transparent;
      border-left-color: inherit;
    }
    li.arrow-list:nth-child(4n+3)::before {
      top: calc(var(--height)/2 + var(--unit)/2);
      left: -1rem;
    }
    li.arrow-list: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){
    li.arrow-list {
      margin: 1rem;
      width: calc(33.33% - 4rem);
      float: left;
      min-height: 7rem;
    }
    li.arrow-list:nth-child(6n+4),
    li.arrow-list:nth-child(6n+5),
    li.arrow-list:nth-child(6n+6) {
      float: right;
    }
    li.arrow-list:nth-child(6n+1)::before,
    li.arrow-list:nth-child(6n+2)::before {
      top: calc(var(--height)/2 + var(--unit)/2);
      left: 100%;
    }
    li.arrow-list:nth-child(6n+1)::after,
    li.arrow-list:nth-child(6n+2)::after {
      top: 3.5rem;
      left: calc(100% + (var(--unit)));
      border: var(--unit) solid transparent;
      border-left-color: inherit;
    }
    li.arrow-list:nth-child(6n+4)::before,
    li.arrow-list:nth-child(6n+5)::before{
      top: calc(var(--height)/2 + var(--unit)/2);
      left: -1rem;
    }
    li.arrow-list:nth-child(6n+4)::after,
    li.arrow-list: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){
    ol {
      max-width: 1600px;
      margin: 0 auto;
    }
    li.arrow-list {
      margin: 1rem;
      /* width: calc(50% - 4rem); */
      width: 46%;
      float: left;
      min-height: 7rem;
    }
    li:nth-child(8n+5),
    li:nth-child(8n+6),
    li:nth-child(8n+7),
    li:nth-child(8n+8){
      /* float: right; */
    }
    li.arrow-list:nth-child(8n+1)::before
    /* li:nth-child(8n+2)::before,
    li:nth-child(8n+3)::before */
    {
      top: calc(var(--height)/2 + var(--unit)/2);
      left: 100%;
    }
    li.arrow-list:nth-child(8n+1)::after
    /* li:nth-child(8n+2)::after,
    li:nth-child(8n+3)::after */
    {
      top: calc(var(--height)/2);
      left: calc(100% + (var(--unit)));
      border: var(--unit) solid transparent;
      border-left-color: inherit;
    }
    li.arrow-list:nth-child(8n+4)::before
    {
      top: calc(var(--height)/2 + var(--unit)/2);
      left: -1rem;
    }
    li.arrow-list:nth-child(8n+4)::after {
      top: calc(var(--height)/2);
      left: -3rem;
      border: var(--unit) solid transparent;
      border-right-color: inherit;
    }
    li.arrow-list:nth-child(8n+5)::before
    /* li:nth-child(8n+2)::before,
    li:nth-child(8n+3)::before */
    {
      top: calc(var(--height)/2 + var(--unit)/2);
      left: 100%;
    }
    li.arrow-list:nth-child(8n+5)::after
    /* li:nth-child(8n+2)::after,
    li:nth-child(8n+3)::after */
    {
      top: calc(var(--height)/2);
      left: calc(100% + (var(--unit)));
      border: var(--unit) solid transparent;
      border-left-color: inherit;
    }

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

    li.arrow-list:nth-child(8n)::before
    {
      top: calc(var(--height)/2 + var(--unit)/2);
      left: -1rem;
    }
    li.arrow-list:nth-child(8n)::after {
      top: calc(var(--height)/2);
      left: -3rem;
      border: var(--unit) solid transparent;
      border-right-color: inherit;
    }
    li.arrow-list:nth-child(8n+7)::before
    /* li:nth-child(8n+2)::before,
    li:nth-child(8n+3)::before */
    {
      display: none;
    }
    li.arrow-list:nth-child(8n+7)::after
    /* li:nth-child(8n+2)::after,
    li:nth-child(8n+3)::after */
    {
        display: none;
    }
    li.arrow-list:nth-child(8n+7)::before
    {
        display: none;
    }
    li.arrow-list:nth-child(8n+7)::after {
        display: none;
    }
  }