assets/styles/style.css

@@ -54,7 +54,7 @@ body{
 .top-infocard-image{
     width: 20%;
     display: block;
-    margin-bottom: 179px;
+    margin-bottom: 177px;
 }
 
 .top-infocard-description{
@@ -69,6 +69,7 @@ body{
     gap: 21px;
     padding: 74px 0;
     justify-content: center;
+    margin-bottom: 81px;
 }
 
 .card{
@@ -91,14 +92,51 @@ body{
     text-align: center;
 }
 
+.middle-photo{
+    display: grid; 
+    grid-template-columns: repeat(3, 1fr);
+    gap: 39px;
+    background: #E0E0E0;
+    padding-left: 72px;
+    padding-right: 72px;
+    position: relative;
+    
+    }
 
 
+.photo,.photox{
+    position: relative;
+    margin-bottom: -62px;
+    margin-top: 62px;
+    max-width: 100%;
+    width: 100%;
+    
+
+}
 
 @media screen and (max-width:768px){
     .top-card{
         grid-template-columns: 1fr;
         padding: 35px 33px 65px 33px;
     }
+    .middle-photo{
+        gap: 13px;
+        grid-template-columns: repeat(2, 1fr);
+        padding-left: 23px;
+        padding-right: 23px;
+        text-align: center;
+        justify-content: center;
+    }
+
+    .photo{
+        margin-top: 32px;
+    }
+
+    .photox{
+        display: flex;
+        justify-content: center;
+    }
+   
 }
 
 

index.html

@@ -62,5 +62,16 @@
             </div>
         </section>
 
+        <div class="middle-photo">
+            
+                <img  class="photo" src="./assets/img/photo1.png" alt="Primeira foto do meio da página" />
+            
+                <img  class="photo" src="./assets/img/photo2.png" alt="Segunda foto do meio da página" />
+  
+                <img class="photox" id="photo3" src="./assets/img/photo3.png" alt="Terceira foto do meio da página" />
+           
+        </div>
+
+
     </body>
 </html>