assets/style/style.css

@@ -22,6 +22,7 @@ body{
 
 .main-banner{
     width: 100%;
+    display: block;
 }
 
 .top-infocard{
@@ -33,7 +34,8 @@ body{
 
 
 .top-infocard-text{
-    max-width: 766px;
+    width: 100%;
+    max-width: 766px;  
 
 }
 
@@ -67,7 +69,7 @@ body{
 .top-infocard-image{
     display: flex;
     justify-content: center;
-    margin: 84px 0 178px;
+    margin: 73px 0 178px;
 }
 
 /*MEDIAS*/
@@ -90,14 +92,91 @@ body{
     .top-infocard-description{
         font-size: 16px;
         line-height: 24px;
+        margin: 0 28px;
+        text-align: center;
+    }
+
+    .top-infocard-image{
+        margin: 65px 0 90px;
+    }
+
+    .top-infocard-img{
+        width: 239px;
+        height: 239px;
+    }
+
+    
+}
+
+@media screen and (min-width: 415px) and (max-width: 899px) {
+    .top-infocard-subtitle{
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    .top-infocard-title{
+        font-size: 28px;
+        line-height: 34px;
+    }
+    
+    .top-infocard-description{
+        font-size: 16px;
+        line-height: 24px;
+        margin: 0 28px;
+        text-align: center;
+
+    }
+
+    .top-infocard-image{
+        margin: 73px 0 90px;
+    }
+    
+}
+
+@media screen and (min-width: 3000px) and (max-width: 4000px) {
+    .header-logo{
+        width: 470px;
+        height: 88px;
+    }
+
+    .main-banner{
+        display: block;
+    }
+
+    .top-infocard-text{
+        width: 1915px;
+        height: 418px;
+        max-width: 100%;
+        margin-top: 152px;
+    }
+
+    .top-infocard-subtitle{
+        font-size: 66px;
+        line-height: 70px;
+    }
+
+    .top-infocard-title{
+        font-size: 100px;
+        line-height: 120px;
+    }
+    
+    .top-infocard-description{
+        font-size: 40px;
+        line-height: 44px;
         margin: 28px;
         text-align: center;
     }
 
     .top-infocard-image{
-        margin: 74px 0 90px;
+        margin: 73px 0 90px;
     }
-    
+
+    .top-infocard-img{
+        width: 656px;
+        height: 656px;
+        margin-top: 152px;
+    }
+
 }
 
 @media screen and (min-width: 415px){

index.html

@@ -47,7 +47,7 @@
         </section>
 
         <figure class="top-infocard-image">
-            <img src="./assets/images/top-infocard-image.png" alt="Imagem de um esquema de três computadores"/>
+            <img class="top-infocard-img" src="./assets/images/top-infocard-image.png" alt="Imagem de um esquema de três computadores"/>
         </figure>
     </main>