Adiciona fotos do meio do site desktop

assets/styles/style.css

@@ -94,6 +94,29 @@ 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,.photo-desktop{
+    position: relative;
+    margin-bottom: -62px;
+    margin-top: 62px;
+    max-width: 100%;
+    width: 100%;
+}
+.photo-mobile{
+    display: none;
+}
+
 @media screen and (max-width:992px) {
     
     .top-infocard-image{
@@ -125,6 +148,23 @@ body{
         grid-template-columns: 1fr;
         padding: 35px 33px 35px 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;
+    }
+
+    .photo-desktop{
+        display: none;
+    }
 }
 
 @media screen and (min-width: 769px) and (max-width: 1250px){

index.html

@@ -62,4 +62,15 @@
             </div>
         </section>
 
+        <div>
+            <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="photo-desktop" id="photo3" src="./assets/img/photo3.png" alt="Terceira foto do meio da página" />
+            </div>
+                    <img class="photo-mobile" src="./assets/img/photo3-mobile.png" alt="Terceira foto do meio da página" />
+            </div>
  </html>