assets/style/main.css

@@ -94,6 +94,28 @@ body {
     padding: 26px;
 }
 
+.banner-middle {
+    background:  #E0E0E0;
+    margin-top: 80px;
+}
+.banner-middle-align {
+    display: flex;
+    gap: 40px
+}
+.banner-middle-images {
+    display: flex;
+    justify-content: center;
+    padding: 0 72px;
+    position: relative;
+    top: 62px;
+    gap: 40px;
+}
+
+.banner-middle-image {
+    max-width: 566px;
+    width: 100%;
+}
+
 @media screen and (min-width: 769px) and (max-width: 1270px) {
 
     .second-infocard {
@@ -126,6 +148,38 @@ body {
         grid-template-columns: 350px;
     }
 
+    .banner-middle-image {
+        display: flex;
+        flex-direction: column;
+        margin: 0 auto;
+        position: relative;
+        top: 32px;
+    } 
+    
+    .banner-middle-images {
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        align-items: center;
+        row-gap: 24px;
+        
+    }
+
+    .image2, .image1 {
+        max-width: 177px;
+    }
+
+    .image3 {
+        max-width: 368px;
+    }
+
+    .banner-middle-align {
+        display: flex;
+        flex-direction: row-reverse;
+        column-gap: 14px;
+        
+    }
+    
 }
 
 @media screen and (max-width: 415px) {