diff --git a/assets/Rectangle 15 mobile.png b/assets/Rectangle 15 mobile.png
new file mode 100644
index 0000000..50df8d7
Binary files /dev/null and b/assets/Rectangle 15 mobile.png differ
diff --git a/index.html b/index.html
index d38705a..2382893 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="stylesheet" href="./style.css">
-        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
         <title>Desafio-1</title>
     </head>
     <body>
@@ -62,8 +62,10 @@
             </div>
         </section>
         <section class="middle-banner">
-            <img src="./assets/Rectangle 13.png" alt="macbook fechando de frente">
-            <img src="./assets/Rectangle 16.png" alt="macbook fechando de cima">
+            <div>
+                <img src="./assets/Rectangle 13.png" alt="macbook fechando de frente">
+                <img src="./assets/Rectangle 16.png" alt="macbook fechando de cima">
+            </div>
             <img src="./assets/Rectangle 17.png" alt="macbook fechando de lado">
         </section>
         <section class="bottom-cards">
@@ -97,7 +99,9 @@
                 </div>
         </section>
         <section class="bottom-banner">
-            <div>
+            <img class="bottom-banner-mobile" src="./assets/Rectangle 15 mobile.png" alt="oculos na frente de codigos"
+            />
+            <div class="bottom-banner-text">
                 <h2>
                     Lorem ipsum dolor sit amet
                 </h2>
@@ -108,7 +112,8 @@
                 </p>
             </div>
             <div>
-                <img src="./assets/Rectangle 15.png" alt="oculos a frente de codigos">
+                <img class="bottom-banner-desktop" src="./assets/Rectangle 15.png" alt="oculos na frente de codigos"
+                />
             </div>
         </section>
         <footer>
diff --git a/style.css b/style.css
index fb52cb1..79ed358 100644
--- a/style.css
+++ b/style.css
@@ -63,6 +63,11 @@ header{
     margin: 0 auto;
 }
 
+.info-section img{
+    width: 100%;
+    max-width: 315px;
+}
+
 /* top cards */
 
 .top-cards{
@@ -91,17 +96,26 @@ header{
 
 .middle-banner{
     background-color: #E0E0E0;
-    display: grid;
-    grid-template-columns: repeat(3, max-content);
+    display: flex;
+    align-items: center;
+    justify-content: center;
     gap: 39px;
     padding: 0 72px;
-    justify-content: center;
+}
+
+.middle-banner div{
+    display: flex;
+    gap: 39px;
 }
 
 .middle-banner img{
     position: relative;
     top: 62px;
-    max-width: 100%;
+    width: 29.48vw;
+}
+
+.middle-banner > img{
+    max-width: calc(33% -78px);
 }
 
 /* bottom cards */
@@ -121,7 +135,7 @@ header{
     align-items: center;
     justify-content: center;
     width: min(432px,90vw);
-    max-height: 332px;
+    min-height: 332px;
     padding: 35px 32px 65px 33px;
     gap: 16px;
 }
@@ -141,6 +155,7 @@ header{
 }
 
 .bottom-banner h2{
+    font-weight: 600;
     font-size: 32px;
     line-height: 39px;
     text-align: center;
@@ -150,16 +165,22 @@ header{
     font-size: 16px;
     line-height: 24px;
     text-align: center;
-    width: 550px;
-    padding-bottom: 50px;
+    max-width: 550px;
+    padding-bottom: 87px;
 }
 
-.bottom-banner img{
-    max-width: 1360px;
+.bottom-banner-desktop{
+    max-width:min(1360px, 70vw);
     max-height: 276px;
     margin-bottom: 112px;
+    width: 100%;
 }
 
+.bottom-banner-mobile{
+    display: none;
+}
+
+
 footer{
     background-color: #000000;
     height: 128px;
@@ -183,9 +204,56 @@ footer p{
     color: #BDBDBD;
 }
 
-/* Banner pincipal mobile */
+@media screen and (max-width: 1024px){
+
+    /* top card mobile  */
+
+    .top-cards{
+        flex-direction: column;
+        margin: 0 32px;
+    }
+
+/* middle banner */
+
+    .middle-banner{
+        flex-direction: column;
+        padding: 0 23px;
+        gap: 24px;
+    }
+
+    .middle-banner > img{
+        max-width: unset;
+        width: 100%;
+    }
+
+    .middle-banner div{
+        flex-direction: row-reverse;
+        gap: 14px;
+        justify-content: center;
+    }
+
+    .middle-banner div > img{
+        max-width: calc(50% - 7px);
+        width: unset;
+    }
+
+/* bottom cards mobile */
+
+    .bottom-cards{
+        flex-direction: column;
+    }
+
+    /* bottom banner mobile */
+
+    .bottom-banner-text{
+        padding: 0 32px;
+}
+}
 
 @media screen and (max-width:768px) {
+
+    /* top banner mobile */
+
     .top-banner-desktop{
         display: none;
     }
@@ -216,10 +284,37 @@ footer p{
         text-align: center;
     }
 
+    .info-section img{
+        max-width: 239px;
+    }
+
 /* top card mobile  */
 
     .top-cards{
         flex-direction: column;
+        padding: 0 32px;
     }
 
+/* bottom banner mobile */
+
+.bottom-banner-text{
+    padding: 0 32px;
+}
+
+.bottom-banner-desktop{
+    display: none;
+}
+
+.bottom-banner-mobile{
+    display: unset;
+    width: 100%;
+    margin-bottom: 50px;
+}
+
+/* footer mobile */
+
+footer p{
+    max-width: 63.04%;
+}
+
 }
\ No newline at end of file
