assets/CSS/main.css

@@ -97,6 +97,68 @@ body {
     text-align: center;
 }
 
+.middle-banner {
+    background: #E0E0E0;
+    margin: 80px 0 0 0;
+    width: 100%;
+}
+
+.middle-banner-container {
+    display: flex;
+    justify-content: center;
+    position: relative;
+    gap: 40px;
+    width: 100%;
+    padding: 0 72px;
+    bottom: -62px;
+}
+
+.middle-banner-image img {
+    width: 100%;
+    max-width: 566px;
+}
+
+@media screen and (max-width:1024px) {
+    .middle-banner-container {
+        display: grid;
+        grid-template-areas: 
+            "b a"
+            "c c";
+        row-gap: 24px;
+        column-gap: 14px;
+        padding: 0 24px;
+        bottom: -32px;
+    }
+
+    .middle-banner-image img {
+        max-width: unset;
+    }
+
+    .middle-banner-image.a {
+        grid-area: a;
+    }
+
+    .middle-banner-image.b {
+        grid-area: b;
+    }
+
+    .middle-banner-image.c {
+        grid-area: c;
+    }
+}
+
+@media screen and (max-width:992px) {
+    .middle-banner {
+        flex-wrap: wrap;
+    }
+}
+
+@media screen and (min-width: 769px) and (max-width: 1200px) {
+    .top-cards {
+        grid-template-columns: repeat(2, max-content);
+    }
+}
+
 @media screen and (max-width:768px) {
 
     .top-infocard {
@@ -129,11 +191,10 @@ body {
         grid-template-columns: 1fr;
         padding: 0 32px ;
     }
-}
 
-@media screen and (min-width: 769px) and (max-width: 1200px) {
-    .top-cards {
-        grid-template-columns: repeat(2, max-content);
+    .middle-banner {
+        padding: 32px 43px 32px 24x;
+        align-items: center;
     }
 }