diff --git a/main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache b/main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache
index 143824099286046d8f192eb2e9d12790a0957239..a69e205baede650f95ebceb44d4d2db85a8676ea 100644
--- a/main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache
+++ b/main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache
@@ -4,18 +4,16 @@
       <h2 class="head-4xl mb-5 xl:hidden">
         Červenec
       </h2>
-      <div class="flex flex-col justify-between xl:flex-row">
-        <div class="xl:pt-8">
-          {{> molecules-work-article-preview }}
+      <div class="article-timeline-grid justify-between">
+        <div class="article-timeline-grid__left-article xl:pt-8">
           {{> molecules-work-article-preview }}
         </div>
-        <div class="relative border border-violet-400 mx-8 hidden xl:block">
+        <div class="article-timeline-grid__timeline relative border border-violet-400 hidden xl:block">
           <div class="absolute bg-violet-400  p-1 text-white font-bold" style="transform: translateX(-50%); top: -1rem">
             Červenec
           </div>
         </div>
-        <div class="xl:pt-14">
-          {{> molecules-work-article-preview }}
+        <div class="article-timeline-grid__right-article xl:pt-14">
           {{> molecules-work-article-preview }}
         </div>
       </div>
@@ -24,18 +22,16 @@
       <h2 class="head-4xl mb-5 xl:hidden">
         Srpen
       </h2>
-      <div class="flex flex-col justify-between xl:flex-row">
-        <div class="xl:pt-8">
-          {{> molecules-work-article-preview }}
+      <div class="article-timeline-grid justify-between">
+        <div class="article-timeline-grid__left-article xl:pt-8">
           {{> molecules-work-article-preview }}
         </div>
-        <div class="relative border border-violet-400 mx-8 hidden xl:block">
+        <div class="article-timeline-grid__timeline relative border border-violet-400 hidden xl:block">
           <div class="absolute bg-violet-400  p-1 text-white font-bold" style="transform: translateX(-50%); top: -1rem">
             Srpen
           </div>
         </div>
-        <div class="xl:pt-14">
-          {{> molecules-work-article-preview }}
+        <div class="article-timeline-grid__right-article xl:pt-14">
           {{> molecules-work-article-preview }}
         </div>
       </div>
diff --git a/main/styleguide/source/css/organisms/article-timeline.pcss b/main/styleguide/source/css/organisms/article-timeline.pcss
new file mode 100644
index 0000000000000000000000000000000000000000..910846b79d164f921e78c527dcde32b59b760892
--- /dev/null
+++ b/main/styleguide/source/css/organisms/article-timeline.pcss
@@ -0,0 +1,24 @@
+.article-timeline-grid {
+  @apply grid gap-2;
+
+  grid-template-areas:
+    "left-article"
+    "right-article";
+
+  @screen xl {
+    grid-template-columns: minmax(0, 570px) 1px minmax(0, 570px);
+    grid-template-areas: "left-article timeline right-article";
+  }
+}
+
+.article-timeline-grid__left-article {
+  grid-area: left-article;
+}
+
+.article-timeline-grid__right-article {
+  grid-area: right-article;
+}
+
+.article-timeline-grid__timeline {
+  grid-area: timeline;
+}
diff --git a/main/styleguide/source/css/style.pcss b/main/styleguide/source/css/style.pcss
index c1378c75cd5090419e1ec5192e833888a745d6ae..7823d72578d048254e640c508142c3390188540a 100644
--- a/main/styleguide/source/css/style.pcss
+++ b/main/styleguide/source/css/style.pcss
@@ -30,6 +30,7 @@
 @import "./molecules/sliding_button.pcss";
 @import "./molecules/switch.pcss";
 
+@import "./organisms/article-timeline.pcss";
 @import "./organisms/footer.pcss";
 @import "./organisms/navbar.pcss";
 @import "./organisms/newsletter.pcss";