assets/styles/main.css

@@ -83,6 +83,39 @@ body{
     font-size: 16px;
     line-height: 24px;
 }
+.middle{
+    background: #E0E0E0;
+}
+.middle-wrapper{
+    display: flex;
+    align-items: center;
+    position: relative;
+    justify-content: center;
+    top:62px;
+    width: 100%;
+
+}
+.gridimg{
+    margin:0 72px;
+    display: grid;
+    flex-wrap:nowrap;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap:39px;
+    width: 100%;
+}
+.middle-img1{
+    display: block;
+    width: 100%;
+}
+.middle-img2{
+    display: block; 
+    width: 100%;
+}
+.middle-img3{
+    display: block;
+    width: 100%;
+
+}
 
 @media screen and (max-width: 1439px){
     .topinfo-texts{
@@ -126,7 +159,32 @@ body{
         min-width: 0;
         
     }
+    .middle-wrapper{
+    }
+
+    .gridimg{
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        grid-template-rows: repeat(1, 1fr);
+        grid-row-gap: 24px;
+        grid-column-gap: 14px;
+        width: 100%;
+        margin:32px 23px;
+    }
+    .middle-img1{
+        width: 100%;
+        grid-area: 1 / 3 / 2 / 5;
+    }
+    .middle-img2{
+        width: 100%;
+        grid-area: 1 / 1 / 2 / 3; 
+    }
+    .middle-img3{
+        width: 100%;
+        grid-area: 2 / 1 / 3 / 5;
+    }
 }
+
 @media screen and (min-width: 2500px){
     .topinfo-subtitle{
         font-size: 64px;

index.html

@@ -56,6 +56,18 @@
                 </div>
             </div>
         </section>
+        <main class="middle">
+            <section>
+                <div class="middle-wrapper">
+                    <div class="gridimg">
+                        <img src="./assets/images/img/middlenote1.png" class="middle-img1" alt="Primeiro notebook meio">
+                        <img src="./assets/images/img/middlenote2.png" class="middle-img2" alt="Segundo notebook meio">
+                        <img src="./assets/images/img/middlenote3.png" class="middle-img3" alt="Terceiro notebook meio">
+
+                    </div>
+                </div>
+            </section>
+        </main>
 
 </body>
 </html>