.timeline {
  @apply relative flex;
}
:where(.timeline > li) {
  @apply relative grid shrink-0 items-center;
  grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var(
      --timeline-row-end,
      minmax(0, 1fr)
    );
  grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var(
      --timeline-col-end,
      minmax(0, 1fr)
    );
}
.timeline > li > hr {
  @apply w-full border-0;
}
:where(.timeline > li > hr) {
  &:first-child {
    @apply col-start-1 row-start-2;
  }
  &:last-child {
    @apply col-start-3 col-end-[none] row-start-2 row-end-auto;
  }
}

.timeline-start {
  @apply col-start-1 col-end-4 row-start-1 row-end-2 m-1 self-end justify-self-center;
}
.timeline-middle {
  @apply col-start-2 row-start-2;
}
.timeline-end {
  @apply col-start-1 col-end-4 row-start-3 row-end-4 m-1 self-start justify-self-center;
}
