diff --git a/web/views/timeline.ejs b/web/views/timeline.ejs
index 931845e..233cf7c 100644
--- a/web/views/timeline.ejs
+++ b/web/views/timeline.ejs
@@ -107,9 +107,38 @@
         @media (min-width: 1024px) {
             .timeline-grid {
                 grid-template-columns: repeat(3, 1fr);
-                gap: 56vh 2.5rem;
+                gap: 8rem 2.5rem;
                 align-items: start;
             }
+            .timeline-card {
+                min-height: clamp(38rem, 62vh, 56rem);
+                padding: 2.5rem;
+            }
+            .timeline-marker {
+                left: 2.5rem;
+                width: 3rem;
+                height: 3rem;
+                font-size: 1.15rem;
+            }
+            .timeline-index {
+                font-size: 0.78rem;
+            }
+            .timeline-date {
+                font-size: 1.05rem;
+            }
+            .timeline-title {
+                font-size: 1.65rem;
+                line-height: 1.3;
+            }
+            .timeline-desc {
+                font-size: 1.05rem;
+                line-height: 1.8;
+            }
+            .timeline-card-footer {
+                margin-top: 1.5rem;
+                padding-top: 1rem;
+                font-size: 0.82rem;
+            }
             /* The line snakes 3 by 3: row 1 left to right, row 2 right to left,
                row 3 left to right, so the connector never crosses itself. */
             .timeline-node:nth-child(1)  { grid-area: 1 / 1; }