assets/styles/main.css

@@ -16,10 +16,11 @@ body{
 .header img{
 
 }
-.topbanner img{
-    height: 100%;
+.topbannerdesktop{
     width: 100%;
-  
+}
+.topbannermobile{
+    display: none;
 }
 .topinfo{
     display: flex;
@@ -117,6 +118,16 @@ body{
 
 }
 
+@media screen and (max-width: 1023px){
+    .topbannerdesktop{
+        display:none;
+    }
+    .topbannermobile{
+        width: 100%;
+        display: block;
+    }
+}
+
 @media screen and (max-width: 1439px){
     .topinfo-texts{
         min-width: 86%;
@@ -149,7 +160,7 @@ body{
         margin: 0 10%;
     }
     .topcards-wrapper{
-        margin-top: 90px;
+        margin-top: 32px;
         margin-bottom: 80px;
         flex-direction:column;
         gap:24px;
@@ -160,6 +171,7 @@ body{
         
     }
     .middle-wrapper{
+        top:32px;
     }
 
     .gridimg{
@@ -169,7 +181,7 @@ body{
         grid-row-gap: 24px;
         grid-column-gap: 14px;
         width: 100%;
-        margin:32px 23px;
+        margin: 0 23px;
     }
     .middle-img1{
         width: 100%;

index.html

@@ -19,7 +19,10 @@
     </header>
         <section class="topbanner">
             <figure>
-                <img src="./assets/images/img/topLaptop.png" alt="Banner do Topo">
+                <img src="./assets/images/img/topLaptop.png" class="topbannerdesktop"alt="Banner do Topo">
+            </figure>
+            <figure>
+                <img src="./assets/images/img/topLaptopmobile.png" class="topbannermobile"alt="Banner do Topo">
             </figure>
         </section>
         <section class="topinfo">