Knowledge Timeline (4) Responsive Media Query

@media(max-width: 900px) {
  #timeline ul li div {
    width: 250px;
  }

  #timeline ul li:nth-child(even) div {
    left: -284px;
  }
}

@media(max-width: 600px) {
  #timeline ul li {
    margin-left: 20px;
  }

  #timeline ul li div {
    width: calc(100vw - 90px);
  }

  #timeline ul li:nth-child(even) div {
    left: 40px;
  }

  #timeline ul li:nth-child(even) div:before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent var(--secondary-color) transparent transparent;
  }
}