feat: texto e imagem e footer mobile desktop

assets/Styles/main.css

@@ -89,8 +89,8 @@ body {
   font-size: 16px;
   line-height: 24px;
 }
-
 .img-baixo {
+  height: 530px;
   background: #e0e0e0;
 }
 .wrapper {
@@ -113,8 +113,7 @@ body {
 }
 
 .infocard-baixo {
-  background: white;
+  margin: 191px 0px;
-  padding: 191px 72px;
   display: grid;
   grid-template-columns: 432px 432px 432px 432px;
   gap: 16px;
@@ -140,7 +139,7 @@ body {
   line-height: 24px;
 }
 
-.very-low-titulo-h1 {
+.very-low-titulo {
   text-align: center;
   font-weight: 600;
   font-size: 32px;
@@ -157,14 +156,18 @@ body {
 }
 
 .very-low-infocard {
-  background: white;
+  padding: 0 32px;
+  width: 100%;
   display: flex;
   align-items: center;
   flex-direction: column;
 }
 
 .very-low-img {
-  padding: 50px 280px 116px;
+  height: auto;
+  width: 100%;
+  max-width: 1360px;
+  padding: 50px 0 116px;
 }
 
 .page-footer {
@@ -183,6 +186,7 @@ body {
 }
 
 .footer-icons-ul {
+  align-items: center;
   display: flex;
   list-style: none;
   margin-bottom: 16px;
@@ -191,6 +195,20 @@ body {
   margin: 0 21px;
 }
 
+.very-low-img-mobile {
+  display: none;
+}
+
+.banner-principal-mobile {
+  display: none;
+}
+
+@media (max-width: 1900px) {
+  .infocard-baixo {
+    grid-template-columns: 432px 432px;
+  }
+}
+
 @media screen and (max-width: 1180px) {
   .top-titulo-h2 {
     font-size: 20px;
@@ -225,6 +243,46 @@ body {
   }
 }
 
+@media (max-width: 1024px) {
+  .infocard-baixo {
+    grid-template-columns: 432px;
+  }
+
+  .very-low-img {
+    display: none;
+  }
+  .very-low-img-mobile {
+    width: 100%;
+    max-width: 414px;
+    height: auto;
+    display: block;
+  }
+  .very-low-paragrafo {
+    margin: 0 0 32px;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    color: #000000;
+  }
+  .very-low-titulo {
+    margin: 50px 0 9px;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 29px;
+    text-align: center;
+    color: #000000;
+  }
+
+  .very-low-infocard {
+    padding: 0;
+  }
+
+  .very-low-div {
+    max-width: 350px;
+  }
+}
+
 @media screen and (max-width: 700px) {
   .notebook-esquerda-mobile {
     width: 177px;
@@ -258,11 +316,27 @@ body {
   }
 }
 
+@media (max-width: 480px) {
+  .infocard-baixo {
+    grid-template-columns: 100%;
+    justify-items: center;
+    padding: 0 16px;
+  }
+  .card-baixo {
+    max-width: 350px;
+    width: 100%;
+    padding: 35px 26px 27px;
+    height: 287px;
+  }
+}
+
 @media screen and (max-width: 414px) {
+  .banner-principal-mobile {
+    display: block;
+  }
   .banner-principal-desktop {
     display: none;
   }
-
   .notebook-esquerda-mobile {
     width: 100%;
     grid-area: header;
@@ -276,9 +350,3 @@ body {
     grid-area: main;
   }
 }
-
-@media screen and (min-width: 415px) {
-  .banner-principal-mobile {
-    display: none;
-  }
-}

index.html

@@ -106,6 +106,7 @@
             alt="Imagem de um notebook 3"
           />
         </div>
+      </section>
       <section class="infocard-baixo">
         <div class="card-baixo">
           <img
@@ -115,9 +116,7 @@
           />
           <p class="paragrafos-baixo">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
-              euismod enim non dui fringilla interdum. Lorem ipsum dolor sit
+            euismod enim non dui fringilla interdum.
-              amet, consectetur adipiscing elit. Cras euismod enim non dui
-              fringilla interdum.
           </p>
         </div>
         <div class="card-baixo">
@@ -128,9 +127,7 @@
           />
           <p class="paragrafos-baixo">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
-              euismod enim non dui fringilla interdum. Lorem ipsum dolor sit
+            euismod enim non dui fringilla interdum.
-              amet, consectetur adipiscing elit. Cras euismod enim non dui
-              fringilla interdum.
           </p>
         </div>
         <div class="card-baixo">
@@ -141,9 +138,7 @@
           />
           <p class="paragrafos-baixo">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
-              euismod enim non dui fringilla interdum. Lorem ipsum dolor sit
+            euismod enim non dui fringilla interdum.
-              amet, consectetur adipiscing elit. Cras euismod enim non dui
-              fringilla interdum.
           </p>
         </div>
         <div class="card-baixo">
@@ -154,15 +149,18 @@
           />
           <p class="paragrafos-baixo">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
-              euismod enim non dui fringilla interdum. Lorem ipsum dolor sit
+            euismod enim non dui fringilla interdum.
-              amet, consectetur adipiscing elit. Cras euismod enim non dui
-              fringilla interdum.
           </p>
         </div>
       </section>
       <section class="very-low-infocard">
+        <img
+          class="very-low-img-mobile"
+          src="./assets/Images/banner-baixo-mobile.png"
+          alt="Banner de baixo mobile"
+        />
         <div class="very-low-div">
-            <h1 class="very-low-titulo-h1">Lorem ipsum dolor sit amet</h1>
+          <h2 class="very-low-titulo">Lorem ipsum dolor sit amet</h2>
           <p class="very-low-paragrafo">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
             vulputate sapien non libero faucibus interdum. In eget tincidunt
@@ -178,25 +176,27 @@
           alt="Banner de baixo"
         />
       </section>
-      </section>
     </main>
     <footer class="page-footer">
       <ul class="footer-icons-ul">
         <li class="footer-icon">
           <a
-            href="https://www.instagram.com/patrckreis/?hl=pt-br"
+            href="https://www.instagram.com/m3.ecommerce/?hl=pt-br"
             target="_blank"
           >
             <img src="./assets/Images/insta-icon.png" alt="Ícone instagram" />
           </a>
         </li>
         <li class="footer-icon">
-          <a href="" target="_blank">
+          <a href="https://www.facebook.com/digitalm3" target="_blank">
             <img src="./assets/Images/face-icon.png" alt="Ícone facebook" />
           </a>
         </li>
         <li class="footer-icon">
-          <a href="" target="_blank">
+          <a
+            href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA"
+            target="_blank"
+          >
             <img src="./assets/Images/yt-icon.png" alt="Ícone youtube" />
           </a>
         </li>