html {
  --color-font: var(--bs-body-color);
  --color-bg: #fff;
}


.timeline section {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.timeline .section-title {
  position: sticky;
  top: 20px;
  /*max-width: 30px;*/
}

.timeline .section-content {
  display: flex;
  flex-direction: column;
}

.timeline article {
  display: flex;
  gap: 10px;
  width: 100%;
  /* max-width: 20rem; */
}

.timeline aside {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.timeline h1, .timeline h2, .timeline h3, .timeline h4, .timeline h5, .timeline h6, 
.timeline p, .timeline pre, .timeline ul, .timeline ol, .timeline dl, .timeline dd,.timeline span
{
  margin-bottom: 0rem;
}

.timeline main {
  padding-bottom: 2rem;
}

/* .timeline main::nth-last-child {
  padding-bottom: 0rem;
} */

.timeline .dot {
  --size: .5rem;
  width: var(--size);
  height: var(--size);
  margin: calc((1rem - var(--size))/2);
  border-radius: 50%;
  background-color: var(--color-font);
  flex-grow: 0;
}

.timeline .line {
  flex-grow: 1;
  margin: 8px 0;
  width: 3px;
  background-color: var(--color-font);
}