.l-timeline {
  --size: 1.25em;
  --offset: calc(1.8em / 6);
  position: relative;
}
.l-timeline > * {
  margin-block-end: 0;
  margin-block-start: 0;
}
.l-timeline > * + * {
  margin-block-start: 3rem;
}
.l-timeline::before {
  --inline-size: 0.15em;
  background-color: var(--spruce-base-color-border);
  content: "";
  inline-size: var(--inline-size);
  inset: var(--offset) auto var(--offset) calc(var(--size) / 2 - var(--inline-size) / 2);
  position: absolute;
  z-index: -1;
}
.l-timeline__item {
  display: flex;
  gap: 1rem;
}
.l-timeline__item::before {
  background-color: var(--spruce-base-color-primary);
  block-size: var(--size);
  border-radius: 0.425rem;
  content: "";
  display: flex;
  flex-shrink: 0;
  inline-size: var(--size);
  margin-block-start: var(--offset);
}
.l-timeline__content > * {
  margin-block-end: 0;
  margin-block-start: 0;
}
.l-timeline__content > * + * {
  margin-block-start: 1rem;
}
.l-timeline__content strong {
  color: var(--spruce-base-color-heading);
}