Ajustando os tamanhos das imagem, desktop e mobile

assets/styles/style.css

@@ -99,16 +99,43 @@ body {
     margin-top: 27px;
 }
 
+.middle-images {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #E0E0E0;
+    padding: 0 72px;
+    gap: 40px;
+}
+
+.middle-image {
+    display: flex;
+    position: relative;
+    width: 566px;
+    bottom: -62px;
+}
+
+.middle-bottom-image {
+    width: 100%;
+    display: block;
+}
+
+.bottom-middle {
+    padding: 191px 0 0;
+}
+
 @media screen and (max-width: 414px) {
     .main-banner-desktop,
-    .top-card-image-desktop {
+    .top-card-image-desktop,
+    .image-middle-desktop {
         display: none;
     }
 }
 
 @media screen and (min-width: 415px) {
     .main-banner-mobile,
-    .top-card-image-mobile {
+    .top-card-image-mobile,
+    .image-image-mobile {
         display: none;
     }
 }
@@ -125,6 +152,29 @@ body {
         flex-direction: column;
         padding: 90px 26px;
     }
+
+    .middle-images {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        align-items: center;
+        justify-content: center;
+        border: 1px solid black;
+        width: 414px;
+    }
+
+    .middle-image {
+        border: 1px solid black;
+        width: 177px;
+    }
+
+    #image-bottom-image-dm {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 368px;
+    }
+
+
 }
 
 @media screen and (max-width: 992px) {

index.html

@@ -70,6 +70,27 @@
                     </div>
             </div>
 
+            <section class="middle-images">
+                    <div class="middle-image">
+                        <img class="middle-bottom-image image-middle-desktop" src="assets/images/middle-image-desktop-01.png" alt="Primeira imagem do meio"/>
+                        <img class="middle-bottom-image image-image-mobile" src="assets/images/middle-image-mobile-01.png" alt="Primeira imagem do meio"/>
+                    </div>
+
+                    <div class="middle-image">
+                        <img class="middle-bottom-image image-middle-desktop" src="assets/images/middle-image-desktop-02.png" alt="Segunda imagem do meio"/>
+                        <img class="middle-bottom-image image-image-mobile" src="assets/images/middle-image-mobile-02.png" alt="Segunda imagem do meio"/>
+                    </div>
+
+                    <div class="teste1">
+                        <div class="middle-image">
+                            <img class="middle-bottom-image image-middle-desktop" src="assets/images/middle-image-desktop-03.png" alt="Terceira imagem do meio"/>
+                            <img class="middle-bottom-image image-image-mobile" id="image-bottom-image-dm" src="assets/images/middle-image-mobile-03.png" alt="Terceira imagem do meio"/>
+                        </div>
+                    </div>
+            </section>
+
+            <section class="bottom-middle"></section>
+
     </main>
     
 </body>