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>
+        <img
+          class="top-img"
+          src="./assets/Images/infocard-cima.png"
+          alt="Infocard de cima"
+        />
       </section>
       <section class="infocard-meio">
         <div class="card-meio">
@@ -92,27 +90,22 @@
       </section>
       <section class="img-baixo">
         <div class="wrapper">
-          <div>
-            <img
-              class="notebook-baixo"
-              src="./assets/Images/notebook-esquerda.jpg"
-              alt="Imagem de um Notebook 1"
-            />
-          </div>
-          <div>
-            <img
-              class="notebook-baixo"
-              src="./assets/Images/notebook-centro.jpg"
-              alt="Imagem de um notebook 2"
-            />
-          </div>
-          <div>
-            <img
-              class="notebook-baixo"
-              src="./assets/Images/notebook-direita.jpg"
-              alt="Imagem de um notebook 3"
-            />
-          </div>
+          <img
+            class="notebook-baixo notebook-esquerda-mobile"
+            src="./assets/Images/notebook-esquerda.jpg"
+            alt="Imagem de um Notebook 1"
+          />
+
+          <img
+            class="notebook-baixo notebook-direita-mobile"
+            src="./assets/Images/notebook-centro.jpg"
+            alt="Imagem de um notebook 2"
+          />
+          <img
+            class="notebook-baixo notebook-centro-mobile"
+            src="./assets/Images/notebook-direita.jpg"
+            alt="Imagem de um notebook 3"
+          />
         </div>
       </section>
     </main>