assets/css/style.css

@@ -31,7 +31,6 @@ body {
   display: grid;
   column-gap: 65px;
   margin-top: 73px;
-  width: 100%;
 }
 
 .top-infocard-text {
@@ -73,7 +72,7 @@ body {
   grid-template-columns: repeat(3, max-content);
   gap: 21px;
   margin-bottom: 80px;
-  width: 100%;
+
   height: auto;
   justify-content: center;
 }
@@ -88,7 +87,7 @@ body {
 }
 
 .top-card-image {
-  width: 35%;
+  width: 30%;
   margin-bottom: 27px;
 }
 
@@ -105,23 +104,25 @@ body {
   display: grid;
   grid-template-columns: repeat(3, max-content);
   justify-content: center;
-  width: 100%;
+  gap: 39px;
 }
 
 .middle-banner {
   width: 60%;
   display: flex;
+  justify-content: space-evenly;
   flex-direction: column;
   align-items: center;
   position: relative;
   bottom: -64px;
   margin-left: auto;
   margin-right: auto;
+  height: auto;
 }
 
 .middle-banner-wrapper {
   position: relative;
-  display: flex;
+  display: grid;
   bottom: -130px;
   justify-content: center;
   align-items: center;
@@ -168,12 +169,11 @@ body {
   justify-content: center;
   display: grid;
   gap: 30px;
-  width: 100%;
 }
 
 .bottom-infocard-image-desktop {
   margin-bottom: 116px;
-  width: 95%;
+  width: 70%;
   height: auto;
   position: relative;
   margin-left: auto;
@@ -266,16 +266,17 @@ body {
 
 @media (max-width: 1024px) {
   .banner-desktop,
+  .middle-banner,
   .middle-banner-desktop,
   .bottom-infocard-image-desktop {
     display: none;
   }
   .top-infocard {
-    gap: 80px;
+    gap: 90px;
   }
 
   .top-infocard-text {
-    max-width: 250px;
+    width: 90%;
   }
 
   .top-infocard-subtitle {
@@ -288,34 +289,53 @@ body {
   }
 
   .top-infocard-description {
-    max-width: 330px;
+    width: 90%;
   }
 
   .top-infocard-image {
-    max-width: 240px;
-    width: 100%;
-    margin-top: 66px;
+    width: 65%;
+    margin-top: 65px;
   }
 
   .top-cards {
     grid-template-columns: 1fr;
   }
 
+  .middle-banner-wrapper {
+    grid-template-columns: auto auto auto auto;
+    grid-gap: 14px;
+  }
+
+  .image-1 {
+    grid-area: 1 / 1 / span 1 / span 1;
+  }
+
+  .image-2 {
+    grid-area: 2 / 1 / span 1 / span 1;
+  }
+
+  .image-3 {
+    grid-area: 1/ 2 / span 1 / span 2;
+    display: block;
+  }
+
   .bottom-cards {
-    grid-template-columns: 300px;
-    margin-right: 0;
+    grid-template-columns: 1fr;
+    margin-bottom: 98px;
   }
 
   .bottom-infocard {
-    gap: 80px;
-  }
-
-  .bottom-infocard {
-    gap: 104px;
+    gap: 50px;
+    margin-bottom: 87px;
   }
 
   .bottom-infocard-text {
-    max-width: 250px;
+    width: 90%;
+    order: 2;
+  }
+
+  .bottom-infocard-image-desktop {
+    order: 1;
   }
 
   .bottom-infocard-title {
@@ -323,7 +343,7 @@ body {
   }
 
   .bottom-infocard-description {
-    max-width: 250px;
+    width: 90%;
   }
 
   .page-footer {
@@ -331,7 +351,7 @@ body {
   }
 
   .footer-text {
-    max-width: 280px;
+    width: 70%;
     text-align: center;
   }
 }

index.html

@@ -121,27 +121,24 @@
           src="./assets/images/middle-banner-desktop-3.png"
           alt="Banner do Meio Desktop 3"
         />
-        <div class="middle-banner-wrapper">
-          <div class="middle-banner-first-row">
-            <img
-              class="middle-banner-mobile"
-              src="./assets/images/middle-banner-mobile-1.png"
-              alt="Banner do Meio Mobile 1"
-            />
-            <img
-              class="middle-banner-mobile"
-              src="./assets/images/middle-banner-mobile-2.png"
-              alt="Banner do Meio Mobile 2"
-            />
-          </div>
 
-          <div>
-            <img
-              class="middle-banner-mobile"
-              src="./assets/images/middle-banner-mobile-3.png"
-              alt="Banner do Meio Mobile 3"
-            />
-          </div>
+        <div class="middle-banner-wrapper">
+          <img
+            class="middle-banner-mobile"
+            src="./assets/images/middle-banner-mobile-1.png"
+            alt="Banner do Meio Mobile 1"
+          />
+          <img
+            class="middle-banner-mobile"
+            src="./assets/images/middle-banner-mobile-2.png"
+            alt="Banner do Meio Mobile 2"
+          />
+
+          <img
+            class="middle-banner-mobile"
+            src="./assets/images/middle-banner-mobile-3.png"
+            alt="Banner do Meio Mobile 3"
+          />
         </div>
       </section>