handling image aspect ratio

resources/css/blocks/timeline.css

@@ -10,7 +10,6 @@
     img {
       @apply rounded-3xl mb-3;
     }
-
     .description,
     .caption {
       @apply m-0 p-0;
@@ -18,6 +17,21 @@
     .caption {
       @apply font-semibold text-primary text-sm;
     }
+
+    &--squared {
+      img {
+        @apply h-auto
+        object-cover object-center;
+        aspect-ratio: 1/1;
+      }
+    }
+    &--md {
+      img {
+        @apply w-full
+        object-cover object-center;
+        max-height: 450px;
+      }
+    }
   }
 
   &--has-lateral-cover {
@@ -34,7 +48,7 @@
   &--has-step-icons {
     .homegrade-blocks-timeline__container {
       &:before {
-        @apply rounded-xl bg-secondary
+        @apply rounded-3xl bg-secondary
         opacity-10
         absolute 
         top-0
@@ -42,8 +56,8 @@
         z-index: -1;
         content: '';
         top: 0;
-        left: calc(33% + 56px);
-        width: 26px;
+        left: calc(33% + 54px);
+        width: 34px;
       }
     }
   }
@@ -51,7 +65,10 @@
   }
 
   .homegrade-blocks-timeline-step {
-    @apply grid grid-cols-3 gap-12 py-6;
+    @apply grid grid-cols-3 gap-12 py-16;
+    &__innercontent {
+      @apply -mt-12;
+    }
     &__cover {
       @apply max-w-md h-auto;
       border-radius: 22px;