/* Keep the English chronology readable inside each marker's own column. */
.timeline {
  grid-template-columns: repeat(12, minmax(180px, 1fr));
}

.timeline-item {
  min-width: 180px;
  padding-inline: 16px;
}

.timeline-item b,
.timeline-item small {
  display: block;
  max-width: 20ch;
  margin-inline: auto;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.timeline-item b {
  min-height: 2.7em;
  line-height: 1.35;
}

.timeline-item small {
  min-height: 2.8em;
}

@media (max-width: 620px) {
  .timeline {
    grid-template-columns: repeat(12, minmax(170px, 1fr));
  }

  .timeline-item {
    min-width: 170px;
  }
}