.timeline {
  position: relative;
  padding-left: 3rem;
  /* space for the line + badges */
}

.timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 56px;
  width: 2px;
  background: var(--bs-gray2);
  /* light gray line */
  height: calc(100% - 56px);
}

.timeline-item {
  position: relative;
  padding-left: 80px;
}

.timeline-item:not(:last-child) {
  padding-bottom: 3rem;
}

.timeline-badge {
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
  background: #FFF;
}

/* Active state */
.timeline-item.active .timeline-badge {
  background: var(--bs-secondary);
  --bs-heading-color: #fff;
}