diff --git a/src/components/TimelineItem.vue b/src/components/TimelineItem.vue
index 101fcaf..b0266a3 100644
--- a/src/components/TimelineItem.vue
+++ b/src/components/TimelineItem.vue
@@ -28,34 +28,21 @@
     &:not(:last-child):before {
       content: "";
       position: absolute;
-      top: var(--timeline-stroke-position-top);
-      left: var(--timeline-stroke-position-horizontal);
+      inset: var(--timeline-stroke-position-odd);
       height: var(--timeline-stroke-length);
       border-left: var(--timeline-stroke-thickness) solid
         var(--timeline-stroke-color);
     }
 
-    @media (min-width: 64em) {
-      &:nth-child(odd) {
-        margin: var(--timeline-item-margin-odd);
-      }
+    &:nth-child(odd) {
+      margin: var(--timeline-item-margin-odd);
+    }
 
-      &:nth-child(even) {
-        margin: var(--timeline-item-margin-even);
+    &:nth-child(even) {
+      margin: var(--timeline-item-margin-even);
 
-        &:before {
-          left: auto;
-          right: var(--timeline-stroke-position-horizontal);
-        }
-
-        .timeline-item__icon {
-          order: 1;
-        }
-
-        .timeline-item__content {
-          text-align: right;
-          margin: 0 1rem 0 0;
-        }
+      &:before {
+        inset: var(--timeline-stroke-position-even);
       }
     }
 
@@ -82,9 +69,19 @@
       }
     }
 
+    &:nth-child(even) &__icon {
+      order: var(--timeline-item-flex-order);
+    }
+
     &__content {
       flex: 1 0 0;
-      margin: 0 0 0 1rem;
+      margin: 0;
+      padding: var(--timeline-item-content-padding-odd);
+    }
+
+    &:nth-child(even) &__content {
+      text-align: var(--timeline-item-text-align-even);
+      padding: var(--timeline-item-content-padding-even);
     }
 
     &__headline {
diff --git a/src/components/TimelineList.vue b/src/components/TimelineList.vue
index 4be4fac..8b21a1d 100644
--- a/src/components/TimelineList.vue
+++ b/src/components/TimelineList.vue
@@ -6,7 +6,7 @@
 
 <style lang="scss">
 .timeline {
-  max-width: calc(var(--timeline-circle-size) * 15);
+  max-width: var(--timeline-max-width);
   position: relative;
 
   margin: 0 auto;
diff --git a/src/scss/base.scss b/src/scss/base.scss
index 80e0cb3..b5ad241 100644
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@@ -96,8 +96,8 @@
     var(--color-router-link);
   --navigation-link-last-child-margin: 0;
 
-  --timeline-max-width: calc(var(--timeline-circle-size) * 15);
-  --timeline-circle-size: 4rem;
+  --timeline-max-width: calc(var(--timeline-circle-size) * 10);
+  --timeline-circle-size: 3rem;
   --timeline-circle-font-size: calc(var(--timeline-circle-size) * 0.2);
   --timeline-circle-background-color: var(--theme-c-woody-brown);
   --timeline-circle-padding: calc(var(--timeline-circle-font-size));
@@ -109,9 +109,18 @@
     var(--timeline-circle-size) / 2 - var(--timeline-stroke-thickness) / 2
   );
 
+  --timeline-stroke-position-odd: var(--timeline-stroke-position-top) auto auto
+    var(--timeline-stroke-position-horizontal);
+  --timeline-stroke-position-even: var(--timeline-stroke-position-odd);
+
   --timeline-item-margin: 1.5rem 0;
-  --timeline-item-margin-odd: 0 0 0 calc(50% - var(--timeline-circle-size) / 2);
-  --timeline-item-margin-even: 0 calc(50% - var(--timeline-circle-size) / 2) 0 0;
+  --timeline-item-margin-odd: var(--timeline-item-margin);
+  --timeline-item-margin-even: var(--timeline-item-margin);
+  --timeline-item-text-align-even: left;
+  --timeline-item-content-padding-odd: 0 0 0 var(--container-spacing-left-safe);
+  --timeline-item-content-padding-even: var(
+    --timeline-item-content-padding-odd
+  );
 
   --table-border-radius: 1rem;
   --table-outer-spacing: 0 var(--container-spacing-right-safe) 0
@@ -194,6 +203,7 @@
   :root {
     --table-cell-padding: 0.5rem 1rem;
     --font-size: 20px;
+    --timeline-circle-size: 4rem;
   }
 }
 
@@ -248,7 +258,20 @@
 
 @media (min-width: 64em) {
   :root {
+    --timeline-max-width: calc(var(--timeline-circle-size) * 15);
     --timeline-stroke-length: calc(100% - var(--timeline-circle-size));
+    --timeline-stroke-position-even: var(--timeline-stroke-position-top)
+      var(--timeline-stroke-position-horizontal) auto auto;
+    --timeline-item-margin-odd: 0 0 0
+      calc(50% - var(--timeline-circle-size) / 2);
+    --timeline-item-margin-even: 0 calc(50% - var(--timeline-circle-size) / 2) 0
+      0;
+    --timeline-item-flex-order: 1;
+    --timeline-item-content-margin-odd: 0 0 0 1rem;
+    --timeline-item-content-margin-even: 0 1rem 0 0;
+    --timeline-item-text-align-even: right;
+    --timeline-item-content-padding-odd: var(--textblock-padding);
+    --timeline-item-content-padding-even: var(--textblock-padding);
   }
 }