Ajusta imagens do meio para o mobile

assets/styles/style.css

@@ -15,6 +15,10 @@ body{
     background-color: #000;
 }
 
+.logo-header{
+    margin: 29px 0;
+}
+
 .logo-header, .main-banner-desktop{
     width: 100%;
     display: block;
@@ -295,6 +299,31 @@ a {
     .photo-desktop{
       display: none;
     }
+
+    .middle-photo-mobile{
+        background-color: #E0E0E0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .photo-mobile{
+        display: block;
+        max-width: 80%;
+        align-items: center;
+        position: relative;
+        margin-bottom: -62px;
+        
+    }
+    
+    .photo,.photo-desktop{
+        position: relative;
+        margin-bottom: 24px;
+        margin-top: 32px;
+        max-width: 100%;
+        width: 100%;
+    }
+
 }
 
 @media screen and (min-width: 769px) and (max-width: 1250px){

index.html

@@ -63,7 +63,7 @@
             </div>
         </section>
 
-        <div>
+        
             <div class="middle-photo">
                 
                     <img  class="photo" src="./assets/img/photo1.png" alt="Primeira foto do meio da página" />
@@ -72,9 +72,13 @@
       
                     <img class="photo-desktop" id="photo3" src="./assets/img/photo3.png" alt="Terceira foto do meio da página" />
             </div>
+            <div class="middle-photo-mobile">
                 <img class="photo-mobile" src="./assets/img/photo3-mobile.png" alt="Terceira foto do meio da página" />
         </div>
 
+          
+        
+
         <section class="second-card">
             <div class="card-2">
                 <img  class="card2-image" src = "./assets/img/second-card-image-1.png" alt="Primeira imagem do card inferior" />