Ajusta imagens do meio para o mobile

assets/styles/style.css

@@ -12,10 +12,13 @@ body{
 .page-header{
     display: flex;
     justify-content: center;
-    padding: 28px 0;
     background-color: #000;
 }
 
+.logo-header{
+    margin: 29px 0;
+}
+
 .logo-header, .main-banner-desktop{
     width: 100%;
     display: block;
@@ -174,70 +177,44 @@ body{
     margin-bottom: 50px;
 }
 
-.final-card-image-desktop{
+.final-photo-desktop{
     width: 70%;
     margin-bottom: 116px;
 }
 
-@media screen and (max-width:414px) {
+footer{
-    .main-banner-desktop, .final-card-image-desktop {
+    background: #000000;
-        display: none;
+    color: #BDBDBD;
-    }
+    display: flex;
-
+    flex-direction: column;
-    .main-banner-mobile, .final-card-image-mobile {
+    align-items: center;
-        max-width: 100%;
+    justify-content: center;
-    }
-
-    .final-card-image-mobile{
-        margin-bottom: 50px;
-    }
-    
 }
 
-@media screen and (max-width:768px){
+.footer-text{
+    font-size: 10px;
+    line-height: 12px;
+    text-transform: uppercase;
+    margin-bottom: 38px;
+}
 
+.footer-logo{
+    margin-top: 38px;
+    margin-bottom: 16px;
+}
 
-    .final-card-info{
+a {
-        max-width: 350px;
+    text-decoration: none;
-    }
+}
 
-    .final-card-text{
+.logo1
-        font-size: 16px;
+{
-        line-height: 24px;
+    padding-right: 21px;
-    }
+}
 
-    .final-card-title{
+.logo3
-        font-size: 24px;
+{
-        line-height: 29px;
+    padding-left: 21px;
-    }
-
-    .top-card{
-        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;
-    }
-
-    .photo-mobile{
-        display: block;
-        justify-content: center;
-        margin-top: 100px;
-    }
 }
 
 
@@ -265,6 +242,11 @@ body{
         font-size: 20px;
         line-height: 24px;
     }
+
+    .second-card{
+        grid-template-columns: 1fr;
+        margin: 0 23px;
+    }
 }
 
 @media screen and (min-width: 993px) and (max-width: 1250px){
@@ -272,6 +254,75 @@ body{
         grid-template-columns: repeat(2, max-content);
         margin: 0 23px;
     }
+}
+
+@media screen and (max-width:414px) {
+    .main-banner-desktop, .final-photo-desktop{
+        display: none;
+    }
+
+    .main-banner-mobile, .final-photo-mobile{
+        display: block;
+        max-width: 100%;
+    }
+    .final-photo-mobile{
+        margin-bottom: 50px;
+    }
+
+    .footer-text{
+        font-size: 10px;
+        line-height: 12px;
+        max-width: 261px;
+        text-align: center;
+    }
+} 
+
+@media screen and (max-width:768px){
+    .top-card{
+        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;
+    }
+
+    .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%;
+    }
 
 }
 
@@ -283,7 +334,7 @@ body{
 }
 
 @media screen and (min-width:415px){
-    .main-banner-mobile, .final-card-image-mobile {
+    .main-banner-mobile, .final-photo-mobile{
         display: none;
     }
 }
@@ -351,4 +402,17 @@ body{
         line-height: 87px;
     }
 
+    .footer-text{
+        font-size: 30px;
+        line-height: 36px;
+        text-transform: uppercase;
+        margin-bottom: 38px;
+        max-width: 1200px;
+    }
+
+    .logo-header{
+        width: 300%;
+    }
+
 }
+

index.html

@@ -19,12 +19,12 @@
         <header class="page-header">
             <a href="/">
                 <img class="logo-header" src="./assets/img/Logo-M3Academy.png" alt="Logo M3 Academy" />
+                <img class="main-banner-mobile" src="./assets/img/main-banner-mobile.png" alt="Banner Principal"/>
             </a>
         </header>
         
         <div>
             <img class="main-banner-desktop" src="./assets/img/main-banner-desktop.png" alt="Banner Principal"/>
-            <img class="main-banner-mobile" src="./assets/img/main-banner-mobile.png" alt="Banner Principal"/>
         </div>
         
         <section class="top-infocard">
@@ -63,15 +63,22 @@
             </div>
         </section>
 
-        <div class="middle-photo">
         
-                <img  class="photo" src="./assets/img/photo1.png" alt="Primeira foto do meio da página" />
+            <div class="middle-photo">
                 
-                <img  class="photo" src="./assets/img/photo2.png" alt="Segunda foto do meio da página" />
+                    <img  class="photo" src="./assets/img/photo1.png" alt="Primeira 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" />
+                    <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>
+            <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" />
@@ -112,7 +119,7 @@
 
         <section class="final-card">
 
-            <img class="final-card-image-mobile" src="./assets/img/final-photo-mobile.png" alt="Banner final da pagina"  />
+            <img class="final-photo-mobile" src="./assets/img/final-photo-mobile.png" alt="Banner final da pagina"  />
 
             <div class="final-card-info">
                 <h1 class="final-card-title" >Lorem ipsum dolor sit amet</h1>
@@ -125,8 +132,29 @@
                 </p>
             </div>
 
-            <img class="final-card-image-desktop" src="./assets/img/final-photo-desktop.png" alt="Banner final da pagina"  />
+            <img class="final-photo-desktop" src="./assets/img/final-photo-desktop.png" alt="Banner final da pagina"  />
         </section>
 
+        <footer>
+            <div class="footer-logo">
+
+                <a  href="https://instagram.com" target="_blank">
+                    <img class="logo1" src="./assets/img/footer-insta-logo.png" alt="Logo do Instagram" />
+                </a>
+                
+                <a  href="https://facebook.com" target="_blank">
+                    <img class="logo2" src="./assets/img/footer-face-logo.png" alt="Logo do Facebook" />
+                </a>
+                
+                <a  href="https://youtube.com" target="_blank">
+                    <img class="logo3"src="./assets/img/footer-youtube-logo.png" alt="Logo do Youtube" />
+                </a>
+
+            </div>
+
+            <p class="footer-text">
+                Copyright © 2020 - Loja  Comércio Eletrônico CNPJ: 000.000.000/0001-00
+            </p>
+        </footer>
     </body>
-</html>
+ </html>