FEATURE Introducing the block

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

@@ -0,0 +1,29 @@
+.highlight-timeline-step {
+  &__innerblocks {
+    @apply pt-12 pb-2;
+
+    > p:last-child {
+      @apply !pb-0 mb-0;
+    }
+
+    .carhop-heading__innerblocks {
+      @apply gap-2;
+    }
+  }
+  &__year {
+    @apply h-auto w-full flex !p-12  justify-center items-center text-8xl text-white  fjalla;
+  }
+
+  &__year-background {
+    svg {
+      polygon {
+        @apply !fill-purple-200;
+      }
+    }
+  }
+  &__year-text {
+    @apply fjalla !pt-12 !pb-10;
+    font-size: clamp(4rem, 20vw, 20rem) !important;
+    line-height: 1.2 !important;
+  }
+}

resources/css/blocks/highlight-timeline.css

@@ -0,0 +1,23 @@
+.highlight-timeline {
+  --current-color: var(--advised-text-color, red);
+
+  .swiper-pagination-bullet {
+    @apply !pb-10 font-normal text-base;
+    color: var(--current-color, white);
+
+    &:after {
+      top: unset !important;
+      bottom: 0 !important;
+      background-color: var(--current-color, white);
+    }
+  }
+
+  p {
+    @apply text-lg;
+  }
+  .swiper-button-next,
+  .swiper-button-prev {
+    --swiper-navigation-size: 32px;
+    @apply filter-white !p-10;
+  }
+}