assets/styles/main.css

@@ -85,4 +85,23 @@ body{
     line-height: 24px;
     text-align: center;
     padding: 26px;
+}
+
+.mid-banners{
+    background: #E0E0E0;
+    margin: 0 0 192px;
+}
+
+.mid-banner-wrapper{
+    display: grid;
+    grid-template-columns: repeat(3, 29%);
+    justify-content: center;
+    gap: 38px;
+    position: relative;
+    top: 62px;
+    
+}
+
+.mid-banner-image{
+   width: 100%;
 }

index.html

@@ -66,6 +66,22 @@
            </div>
         </section>
 
+        <div class="mid-banners">
+            <div class="mid-banner-wrapper">
+                <figure>
+                    <img class="mid-banner-image" src="./assets/images/mid-image-01.png" alt="Notebook meio aberto primeiro angulo" />
+                </figure>
+    
+                <figure>
+                    <img class="mid-banner-image" src="./assets/images/mid-image-02.png" alt="Notebook meio aberto segundo angulo" />
+                </figure>
+    
+                <figure>
+                    <img class="mid-banner-image" src="./assets/images/mid-image-03.png" alt="Notebook meio aberto terceiro angulo" />
+                </figure>
+            </div>
+        </div>
+
        </main>
 
     </body>