.chronology-timeline-row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.75rem;
}

.chronology-dot {
  width: 2.25rem;
  height: 2.25rem;
}

.chronology-line {
  left: 1.125rem;
}

.chronology-detail-sheet {
  width: min(480px, 100vw);
}

.chronology-drawer-poster {
  width: min(180px, 50%);
  aspect-ratio: 2 / 3;
}

@media (min-width: 640px) {
  .chronology-timeline-row {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1.5rem;
  }

  .chronology-dot {
    width: 3rem;
    height: 3rem;
  }

  .chronology-line {
    left: 1.5rem;
  }
}