_assets/css/main.css

@@ -232,15 +232,136 @@ body {
 
 
 @media screen and (max-width: 414px) {
-  .top-banner-image-desktop,
+    .top-banner-image-desktop,
-  .bottom-banner-desktop {
+    .bottom-banner-desktop {
+        display: none;
+    }
+
+    .column-reverse {
+      display: flex;
+      flex-direction: column-reverse;
+    }
+
+    .infocard-subtitle {
+      font-size: 20px;    
+    }
+
+    .infocard-title {
+      font-size: 28px;
+      line-height: 12px;
+    }
+
+    .infocard-description {
+      text-align: center;
+      justify-content: center;
+      padding-top: 19px;    
+    }
+
+    .infocard {    
+      margin: 73px 27px 0;
+    }
+
+    .cards-wrapper {
+      display: block;    
+      margin: 90px 32px 80px 32px;
+    }
+
+    .card {
+      width: 350px;
+      margin-top: 16px;
+      align-items: center;
+    }
+
+    .pc-icon-image {
+      max-width: 239px;
+    }
+
+    .cards-wrapper2 {
+      display: block;    
+      margin: 80px 0 98px 0;
+    }
+
+    .card2 {
+      width: 350px;
+      margin: 7% 0 0 6%;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .article-description {
+      text-align: center;
+      justify-content: center;
+      margin: 0 auto 0 auto;
+      margin: 0 32px 0 32px;
+    }
+
+    .page-footer {
+      margin-top: 87px;
+    }
+
+    .article {
+      margin-top: 50px;
+    }
+
+    .footer-text {
+      max-width: 261px;
+      text-align: center;
+    }
+
+
+    /* imagens pequenas e invertidas grid */
+    .img-small1 {
+      grid-area: foto1;
+    }
+    .img-small2 {
+      grid-area: foto2;
+    }
+    .img-big3 {
+      grid-area: foto3;
+      width: 368px;
+    }
+
+    .grid2 {
+      display: grid;
+      grid-template-columns: auto auto ;
+      grid-template-rows: auto;
+      direction: rtl;      
+      grid-template-areas: 
+      "foto2 foto1"
+      "foto3 foto3"
+      ;}
+
+    .img-small1 {
+      grid-area: foto1;
+    }
+    .img-small2 {
+      grid-area: foto2;
+    }
+    .img-big3 {
+      grid-area: foto3;
+      width: 368px;
+    }
+
+    .flex  {
+      background-color: #E0E0E0;
+      height: 574px;
+      margin-bottom: 112px;
+
+    }
+}
+
+
+
+
+
+/* Tablet e Mobile - 415px to 1024px */
+@media only screen and (min-device-width: 415px) and (max-device-width: 1024px){
+  .top-banner-image-mobile,
+  .bottom-banner-mobile {
       display: none;
   }
 
-  .column-reverse {
+
-    display: flex;
-    flex-direction: column-reverse;
-  }
 
   .infocard-subtitle {
     font-size: 20px;    
@@ -262,7 +383,7 @@ body {
   }
 
   .cards-wrapper {
-    display: block;    
+    display: grid;    
     margin: 90px 32px 80px 32px;
   }
 
@@ -276,19 +397,24 @@ body {
     max-width: 239px;
   }
 
+
   .cards-wrapper2 {
-    display: block;    
+    display: grid;    
-    margin: 80px 23px 98px 23px;
+    margin: 80px 0 98px 0;
   }
 
   .card2 {
     width: 350px;
-    margin-top: 16px;
+    margin: 7% 0 0 6%;
+    justify-content: center;
     align-items: center;
   }
 
   .article-description {
+    text-align: center;
+    justify-content: center;
     margin: 0 auto 0 auto;
+    margin: 0 32px 0 32px;
   }
 
   .page-footer {
@@ -297,27 +423,116 @@ body {
 
   .article {
     margin-top: 50px;
-}
-
-.footer-text {
-  max-width: 261px;
-  text-align: center;
-
-}
-
-
-}
-
-
-
-
-
-
-
-@media screen and (min-width: 415px) {
-  .top-banner-image-mobile,
-  .bottom-banner-mobile {
-      display: none;
   }
 
+  .footer-text {
+    max-width: 261px;
+    text-align: center;
+  }
+
+
+  /* imagens pequenas e invertidas grid */
+  .img-small1 {
+    grid-area: foto1;
+  }
+  .img-small2 {
+    grid-area: foto2;
+  }
+  .img-big3 {
+    grid-area: foto3;
+    width: 368px;
+  }
+
+  .grid2 {
+    display: grid;
+    grid-template-columns: auto auto ;
+    grid-template-rows: auto;
+    direction: rtl;      
+    grid-template-areas: 
+    "foto2 foto1"
+    "foto3 foto3"
+    ;}
+
+  .img-small1 {
+    grid-area: foto1;
+  }
+  .img-small2 {
+    grid-area: foto2;
+  }
+  .img-big3 {
+    grid-area: foto3;
+    width: 368px;
+  }
+
+  .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;
+  }
+
+  .article-description {
+    max-width: 550px;
+    text-align: center;
+    font-size: 16px;
+    line-height: 24px;
+    margin: 0 auto 50px auto;
+  }
 }
+
+
+
+/* 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;
+  }
+
+  .cards-wrapper2 {
+    margin: 179px 72px 74px 72px;
+  }
+}
+
+
+
+/* Desktop 4k - 2501px above */
+@media only screen and (min-device-width: 2501px) {
+
+  .top-banner-image-mobile,
+  .bottom-banner-mobile {
+    display: none;
+  }
+
+  .infocard-description {
+    font-size: 32px;
+    line-height: 36px;
+  }
+
+  .cards-wrapper2 {
+    margin: 179px 370px 74px 370px;
+  }
+
+  .fig-wrapper {
+    padding-top: 62px;
+  }
+
+  .article-description {
+    font-size: 32px;
+    line-height: 36px;
+    max-width: 850px;
+  }
+
+}

index.html

@@ -106,15 +106,15 @@
 
 
 
-      <section class="flex">
+      <section class="flex grid2">
         <div>
-          <img class="flex-img" src="./_assets/images/image1.png" alt="">
+          <img class="flex-img img-small1" src="./_assets/images/image1.png" alt="Imagem 1">
         </div>
         <div>
-          <img class="flex-img" src="./_assets/images/image2.png" alt="">
+          <img class="flex-img img-small2" src="./_assets/images/image2.png" alt="Imagem 2">
         </div>
         <div>
-          <img class="flex-img" src="./_assets/images/image3.png" alt="">
+          <img class="flex-img img-big3" src="./_assets/images/image3.png" alt="Imagem 3">
         </div>
       </section>