Add heading to blog carousel

Author: ashwinimanoj

assets/scss/components/_blog-carousel.scss

@@ -11,14 +11,19 @@
 }
 
 .card {
-    display: flex; 
+    display: flex;
     justify-content: center;
-    align-items: center;   
-    height: 300px;
-    border-radius: 8px;   
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 0 15px rgba(0, 0, 0, 0.1); 
+    align-items: center;
+    min-height: 300px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 0 15px rgba(0, 0, 0, 0.1);
     padding: 20px;
-    margin: 20px;  
-    text-align: center;      
-    flex-direction: column;   
-}
+    margin: 20px;
+    text-align: center;
+    flex-direction: column;
+}
+
+.row.g-0 {
+    margin-left: 0;
+    margin-right: 0;
+  }

layouts/index.html

@@ -20,7 +20,16 @@
 </div>
 
 <div class="strip">
-  {{ partial "blog-carousel.html" . }}
+  <div class="container-fluid py-5 m-0">
+    <div class="row g-0">
+      <div class="col-12 col-md-2 p-0 d-flex align-items-center justify-content-center">
+        <h2 class="text-center">Our Latest <br> Posts</h2>
+      </div>
+      <div class="col-12 col-md-10 p-0">
+        {{ partial "blog-carousel.html" . }}
+      </div>
+    </div>
+  </div>
 </div>
 
 {{ $services := where (where .Site.RegularPages "Type" "services") ".Params.featured" true }}