_assets/css/main.css

@@ -278,17 +278,21 @@ body {
 
     .cards-wrapper2 {
       display: block;    
-    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 +301,238 @@ body {
 
     .article {
       margin-top: 50px;
-}
+    }
 
-.footer-text {
+    .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){
-@media screen and (min-width: 415px) {
   .top-banner-image-mobile,
   .bottom-banner-mobile {
       display: none;
   }
 
+
+
+  .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: grid;    
+    margin: 90px 32px 80px 32px;
+  }
+
+  .card {
+    width: 350px;
+    margin-top: 16px;
+    align-items: center;
+  }
+
+  .pc-icon-image {
+    max-width: 239px;
+  }
+
+
+  .cards-wrapper2 {
+    display: grid;    
+    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-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>