assets/Styles/main.css

@@ -145,6 +145,35 @@ body {
   }
 }
 
+@media screen and (max-width: 700px) {
+  .notebook-esquerda-mobile {
+    width: 177px;
+    grid-area: header;
+  }
+  .notebook-centro-mobile {
+    width: 370px;
+    grid-area: menu;
+  }
+  .notebook-direita-mobile {
+    width: 177px;
+    grid-area: main;
+  }
+
+  .wrapper {
+    padding: 0 23px;
+    top: 32px;
+    column-gap: 14px;
+    row-gap: 23px;
+    grid-template-columns: none;
+    display: -ms-grid;
+    display: grid;
+    grid-template-areas:
+      "header main"
+      "menu menu "
+      "menu menu ";
+  }
+}
+
 @media screen and (max-width: 414px) {
   .banner-principal-desktop {
     display: none;
@@ -156,3 +185,18 @@ body {
     display: none;
   }
 }
+
+@media screen and (max-width: 400px) {
+  .notebook-esquerda-mobile {
+    width: 100%;
+    grid-area: header;
+  }
+  .notebook-centro-mobile {
+    width: 100%;
+    grid-area: menu;
+  }
+  .notebook-direita-mobile {
+    width: 100%;
+    grid-area: main;
+  }
+}

index.html

@@ -47,13 +47,11 @@
             dui.
           </p>
         </div>
-        <div>
         <img
           class="top-img"
           src="./assets/Images/infocard-cima.png"
           alt="Infocard de cima"
         />
-        </div>
       </section>
       <section class="infocard-meio">
         <div class="card-meio">
@@ -92,28 +90,23 @@
       </section>
       <section class="img-baixo">
         <div class="wrapper">
-          <div>
           <img
-              class="notebook-baixo"
+            class="notebook-baixo notebook-esquerda-mobile"
             src="./assets/Images/notebook-esquerda.jpg"
             alt="Imagem de um Notebook 1"
           />
-          </div>
+
-          <div>
           <img
-              class="notebook-baixo"
+            class="notebook-baixo notebook-direita-mobile"
             src="./assets/Images/notebook-centro.jpg"
             alt="Imagem de um notebook 2"
           />
-          </div>
-          <div>
           <img
-              class="notebook-baixo"
+            class="notebook-baixo notebook-centro-mobile"
             src="./assets/Images/notebook-direita.jpg"
             alt="Imagem de um notebook 3"
           />
         </div>
-        </div>
       </section>
     </main>
   </body>