From c58113bd4f2ab26525eaa606e5df2335406a81cf Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Fri, 17 Nov 2023 17:04:57 +0100
Subject: [PATCH] refactoring the block with an inner container

---
 resources/css/blocks/timeline.css | 56 +++++++++++++++++++++----------
 1 file changed, 39 insertions(+), 17 deletions(-)

diff --git a/resources/css/blocks/timeline.css b/resources/css/blocks/timeline.css
index 0cb1127..d2312bd 100644
--- a/resources/css/blocks/timeline.css
+++ b/resources/css/blocks/timeline.css
@@ -1,10 +1,29 @@
 .homegrade-blocks-timeline {
-  @apply max-w-screen-xl mx-auto relative my-32;
-  &__lateral-cover {
-    @apply max-h-96 h-auto mx-auto;
+  @apply max-w-screen-xl mx-auto my-32;
+  .section_titling {
+    @apply mb-9;
   }
+  &__container {
+    @apply relative;
+  }
+  &__lateral-cover {
+    img {
+      @apply rounded-3xl mb-3;
+    }
+
+    .description,
+    .caption {
+      @apply m-0 p-0;
+    }
+    .caption {
+      @apply font-semibold text-primary text-sm;
+    }
+  }
+
   &--has-lateral-cover {
-    @apply grid grid-cols-3 gap-12;
+    .homegrade-blocks-timeline__container {
+      @apply grid grid-cols-3 gap-12;
+    }
     .homegrade-blocks-timeline__innercontent {
       @apply col-span-2;
     }
@@ -13,17 +32,19 @@
     }
   }
   &--has-step-icons {
-    &:before {
-      @apply rounded-xl bg-secondary
-      opacity-10
-      absolute 
-      top-0
-      h-full;
-      z-index: -1;
-      content: '';
-      top: 0;
-      left: calc(33% + 56px);
-      width: 26px;
+    .homegrade-blocks-timeline__container {
+      &:before {
+        @apply rounded-xl bg-secondary
+        opacity-10
+        absolute 
+        top-0
+        h-full;
+        z-index: -1;
+        content: '';
+        top: 0;
+        left: calc(33% + 56px);
+        width: 26px;
+      }
     }
   }
   &--has-no-step-pictures {
@@ -49,8 +70,9 @@
       @apply w-24 h-24 shrink-0 bg-white shadowed p-4 rounded-3xl flex justify-center items-center;
 
       img {
-        @apply mx-auto object-contain w-12 h-10;
-        max-height: 3rem;
+        @apply mx-auto object-contain;
+        max-width: 80%;
+        max-height: 80%;
       }
     }
     &__content {