_assets/css/main.css

@@ -1,3 +1,4 @@
+/* Reset */
 * {
   margin: 0;
   padding: 0;
@@ -20,15 +21,19 @@ body {
   display: block;
 }
 
-.top-banner-image-desktop,
+.top-banner-image-desktop {
+  width: 100%;
+}
 .top-banner-image-mobile {
   width: 100%;
+  display: none;
 }
 
 .infocard {
   margin: 73px 25%;
   justify-content: center;
 }
+
 .infocard-title {
   text-align: center;
   font-weight: 500;
@@ -65,18 +70,15 @@ body {
 }
 
 .cards-wrapper {
-  display: grid;
+  gap: 16px;
-  grid-template-columns: repeat(3, max-content);
-  gap: 21px;
   justify-content: center;
-  padding-top: 179px;
-  padding-bottom: 74px;
   text-align: center;
+  margin: 129px 72px 74px 72px;
+  display: flex;
 }
 
 .card {
   max-width: 350px;
-  display: flex;
   flex-direction: column;
   align-items: center;
   padding: 0 26px 28px;
@@ -88,6 +90,7 @@ body {
   margin-top: 35px;
   margin-bottom: 15px;
 }
+
 .card-description {
   font-weight: 400;
   font-size: 16px;
@@ -96,36 +99,57 @@ body {
 }
 
 .fig-container {
+  display: flex;
   background-color: #E0E0E0;  
-  max-height: 530px;
-
 }
 
-.fig-wrapper {
+.figure-wrapper {
-  max-height: 530px;
+  margin-left: 72px;
-  display: flex;
+  margin-right: 72px;
-  justify-content: center;
-  align-items: center;
-  gap: 39px;
-  padding: 0;
 }
 
 .fig-image {
+  width: 100%;
   max-width: 566px;
-  width: 29%;  
 }
 
-.cards-wrapper2 {
+.flex-img {
+  max-width: 100%;
+  display: block; 
+}
 
+.flex {
+/*   background-color: #E0E0E0; */
+  display: flex;
+  flex-wrap: nowrap;
+  max-width: 80%;
+  margin: 0 auto;
+}
+
+.flex > div {
+  flex: 1 1 566px;
+  margin: 0 20px;
+}
+
+
+
+
+
+
+
+
+
+/* bloco 4 cards */
+.cards-wrapper2 {  
   gap: 16px;
   justify-content: center;
   text-align: center;
-  margin: 179px 72px 74px 72px;
+  margin: 129px 72px 74px 72px;
   display: flex;
 }
 
 .card2 {
-
+  max-width: 350px;
   flex-direction: column;
   align-items: center;
   padding: 0 26px 28px;
@@ -145,8 +169,10 @@ body {
   margin-top: 27px;
 }
 
+
+/* bloco Article */
 .article {
-  margin-top: 108px;  
+  margin-top: 108px;
 }
 
 .article-title {
@@ -162,9 +188,10 @@ body {
   font-size: 16px;
   line-height: 24px;
   margin: 0 auto 50px auto;
-  
 }
 
+
+/* bloco bottom banner */
 .bottom-banner {
   display: flex;
   align-items: center;
@@ -176,6 +203,13 @@ body {
   width: 71%;
 }
 
+.bottom-banner-mobile {
+  width: 100%;
+  display: none;
+}
+
+
+/* bloco footer */
 .page-footer {
   margin-top: 116px;
   display: flex;
@@ -191,7 +225,6 @@ body {
 }
 
 .footer-text {
-  color: #ffffff;
   text-align: center;
   margin: 17px 0 38px;
   font-size: 10px;
@@ -202,125 +235,3 @@ body {
 
 
 
-
-
-
-
-
-/* Tablet e Mobile - 280px to 1024px */
-@media only screen 
-  and (min-device-width: 280px) 
-  and (max-device-width: 1024px) {
-
-  .top-banner-image-desktop {
-    display: none;
-  }
-
-  .infocard {
-    margin: 73px 6%;
-  }
-
-  .infocard-subtitle {
-    font-size: 20px;
-    line-height: 24px;
-  }
-
-  .infocard-title {
-    font-size: 28px;
-    line-height: 34px;
-  }
-  .infocard-description {
-    padding-top: 19px;
-    font-size: 16px;
-    line-height: 24px;
-    text-align: center;
-  }
-
-  .pc-icon {
-    margin-top: 65px 0 91px;
-  }
-
-  .pc-icon-image {
-    width: 58%;
-  }
-
-  .cards-wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding-top: 91px;
-    padding-bottom: 80px;
-  }
-
-  .card {
-    padding: 35px 26px 28px;
-    background: #ffffff;
-    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
-  }
-
-  .card-description {
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 24px;
-    margin-top: 27px;
-  }
-
-  .imageblock-wrapper {
-    background-color: #e0e0e0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .imageblock-image {
-    align-items: center;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .image2 .image1 {
-    grid-row: span 2;
-    width: 43%;
-  }
-
-};
-
-
-
-
-
-
-
-
-
-
-
-/* Desktop - 1025px to 2500px */
-@media only screen 
-  and (min-device-width: 1025px) 
-  and (max-device-width: 2500px) {
-
-    .top-banner-image-mobile,
-    .bottom-banner-mobile {
-      display: none;
-    }
-
-};
-
-
-
-
-
-
-
-
-
-/* Desktop 4k - 2501px above */
-@media only screen 
-  and (min-device-width: 2501px) {
-
-    .top-banner-image-mobile,
-    .bottom-banner-mobile {
-      display: none;
-    }
-};

index.html

@@ -104,20 +104,23 @@
       </div>
 
 
-        <div class="fig-container">
-
-          <figure class="fig-wrapper">
-            <img class="fig-image" src="./_assets/images/image1.png" alt="Imagem 1">
-            <img class="fig-image" src="./_assets/images/image2.png" alt="Imagem 2">
-            <img class="fig-image" src="./_assets/images/image3.png" alt="Imagem 3">
-          </figure>
 
+      <section class="flex">
+        <div>
+          <img class="flex-img" src="./_assets/images/image1.png" alt="">
         </div>
-
+        <div>
-
+          <img class="flex-img" src="./_assets/images/image2.png" alt="">
+        </div>
+        <div>
+          <img class="flex-img" src="./_assets/images/image3.png" alt="">
+        </div>
+      </section>
 
 
       
+
+
       <!-- Cards2 | Desktop and Mobile -->
       <div class="cards-wrapper2">
         <figure class="card2">
@@ -165,7 +168,7 @@
         <figure class="card2">
           <img
             class="card-image2"
-            src="./_assets/images/card2-image3.svg"
+            src="./_assets/images/card2-image4.svg"
             alt="Card Image 4"
           />
           <figcaption class="card-description2">