FEATURE Introducing the block

resources/css/blocks/story-timeline-step.css

@@ -0,0 +1,33 @@
+.story-timeline-step {
+  @apply max-w-screen-xl mx-auto !pb-24;
+
+  &__year {
+    @apply text-center text-primary  !font-bold flex items-center justify-center gap-6 tracking-widest !pb-12;
+
+    &:after,
+    &:before {
+      content: '';
+      @apply block w-full  bg-primary;
+      height: 1px;
+    }
+  }
+
+  &__innerblocks {
+    p {
+      @apply mt-0;
+    }
+  }
+
+  .wp-block-image {
+    img {
+      @apply grayscale;
+      &:hover {
+        @apply grayscale-0;
+      }
+    }
+  }
+
+  .wp-block-columns {
+    @apply !mb-16;
+  }
+}

resources/css/blocks/story-timeline.css

@@ -0,0 +1,24 @@
+.wp-block-carhop-blocks-story-timeline {
+  @apply flex gap-12 mx-auto max-w-screen-xl;
+  aside.story-timeline__years {
+    @apply text-white;
+    ul {
+      @apply sticky top-0 left-0 !pt-6;
+      @apply list-none p-0 m-0 flex flex-col gap-4;
+      li {
+        @apply list-none bg-white text-primary p-2 border border-primary text-3xl fjalla;
+      }
+
+      li.story-timeline__year[data-active='false'] {
+        @apply opacity-30;
+      }
+      li.story-timeline__year[data-active='true'] {
+        @apply opacity-100;
+      }
+    }
+  }
+}
+
+.wp-block-carhop-blocks-heading + .wp-block-carhop-blocks-story-timeline {
+  @apply mt-6;
+}