.timeline {
  --timeline-track-color: #CC0000;
  --timeline-track-size: clamp(3px, 0.3125vw, 6px);
  --timeline-dot-color: #CC0000;
  --timeline-dot-size: clamp(14px, 1.25vw, 24px);
  --timeline-track-space: clamp(35px, 4.6875vw, 60px);
  position: relative;
  display: grid;
  grid-gap: calc(1.5 * var(--timeline-track-space));
  padding-left: var(--timeline-track-space);
}
.timeline::before {
  background: var(--timeline-track-color);
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: var(--timeline-track-size);
  left: calc(var(--timeline-dot-size) / 2);
  transform: translateX(-50%);
}
.timeline .timeline-entry {
  position: relative;
}
.timeline .timeline-entry::before {
  border-radius: 50%;
  content: "";
  display: block;
  width: var(--timeline-dot-size);
  height: var(--timeline-dot-size);
  background-color: var(--timeline-dot-color);
  position: absolute;
  top: -1px;
  left: calc(-1 * var(--timeline-track-space));
}
.timeline .timeline-entry :first-child:is(h1, h2, h3, h4, h5, h6) {
  margin-top: -0.5em;
}
.timeline .timeline-entry > *:first-child {
  margin-top: 0;
}
.timeline .timeline-entry > *:last-child {
  margin-bottom: 0;
}