_assets/css/main.css

@@ -97,33 +97,24 @@ body {
 
 .fig-container {
   background-color: #E0E0E0;  
+  max-height: 530px;
 
 }
 
 .fig-wrapper {
-  height: 530px;
-display: flex;
-justify-content: center;
-align-items: center;
-gap: 39px;
-
-
+  max-height: 530px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 39px;
+  padding: 0;
 }
 
 .fig-image {
-
-
+  max-width: 566px;
   width: 29%;  
-  
 }
 
-
-
-
-
-
-
-
 .cards-wrapper2 {
 
   gap: 16px;
@@ -174,21 +165,15 @@ gap: 39px;
   
 }
 
-
-
-
-
-
-
 .bottom-banner {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.bottom-banner-image-desktop,
-.bottom-banner-image-mobile {
-  width: 100%;
+.bottom-banner-desktop {
+  max-width: 1360px;
+  width: 71%;
 }
 
 .page-footer {
@@ -222,12 +207,12 @@ gap: 39px;
 
 
 
+/* Tablet e Mobile - 280px to 1024px */
+@media only screen 
+  and (min-device-width: 280px) 
+  and (max-device-width: 1024px) {
 
-
-
-@media screen and (max-width: 414px) {
-  .top-banner-image-desktop,
-  .bottom-banner-desktop {
+  .top-banner-image-desktop {
     display: none;
   }
 
@@ -297,7 +282,8 @@ gap: 39px;
     grid-row: span 2;
     width: 43%;
   }
-}
+
+};
 
 
 
@@ -309,61 +295,17 @@ gap: 39px;
 
 
 
+/* Desktop - 1025px to 2500px */
+@media only screen 
+  and (min-device-width: 1025px) 
+  and (max-device-width: 2500px) {
 
-@media screen and (min-width: 415px) and (max-width: 1200px) {
-  .top-banner-image-mobile,
-  .bottom-banner-mobile {
-    display: none;
-  }
+    .top-banner-image-mobile,
+    .bottom-banner-mobile {
+      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;
-  }
-}
+};
 
 
 
@@ -373,12 +315,12 @@ gap: 39px;
 
 
 
+/* Desktop 4k - 2501px above */
+@media only screen 
+  and (min-device-width: 2501px) {
 
-
-
-@media screen and (min-width: 1024px) and (max-width: 2500px) {
-  .top-banner-image-mobile,
-  .bottom-banner-mobile {
-    display: none;
-  }
-}
+    .top-banner-image-mobile,
+    .bottom-banner-mobile {
+      display: none;
+    }
+};

index.html

@@ -105,6 +105,7 @@
 
 
         <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">