diff --git a/index.html b/index.html
index 461a01c..d9bafa0 100644
--- a/index.html
+++ b/index.html
@@ -62,6 +62,26 @@
                 </div>
             </div>         
         </div>
+        <div class="cards-macbook">
+            <div class="cards-macbook-container">
+                <div class="first-card-macbook">
+                    <figure>
+                        <img src="./assets/imgs/card-1.png" alt="imagem de frente de um macbook">
+                    </figure>
+                </div>
+                <div class="second-card-macbook">
+                    <figure>
+                        <img src="./assets/imgs/card-2.png" alt="imagem vista de cima de um macbook ">
+                    </figure>
+                </div>
+                <div class="third-card-macbook">
+                    <figure>               
+                        <img src="./assets/imgs/card-3.png" alt="imagem vista de perto e de lado de um macbook">
+                    </figure>
+                </div>
+            </div>
+           
+        </div>
     </main>
 </body>
 </html>
\ No newline at end of file
diff --git a/styles/main.css b/styles/main.css
index 48613fb..420ec71 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -73,7 +73,7 @@
     width: 100%;
 }
 
-.first-card figure, .second-card figure, .three-card figure{
+.first-card figure, .second-card figure, .three-card figure {
     width: 100%;
     max-width: 350px;
     height: 287.68px;
@@ -92,12 +92,40 @@
     width: 100%;
     height: auto;
     text-align: center;
-    
 }
 
+/* cards com imagem de macbook */
+.cards-macbook {
+    width: 100%;
+    height: 530px;
+    background: #E0E0E0;
+}
 
+.cards-macbook-container {
+    max-width: 1776px;
+    width: 100%;
+    height: 530px;
+    display: grid;
+    grid-template-areas:
+    "A B C";
+    justify-content: center;
+    align-items: center;
+    gap: 39px;
+    position: relative;
+    margin: auto;
+    top: 62px;
+    padding-left: 72px;
+    padding-right: 72px;
+    padding-bottom: 0;
+    padding-top: 62px;
+}
 
-@media screen and (max-width: 1024px) {
+.first-card-macbook figure img,.second-card-macbook figure img,.third-card-macbook figure img{
+    max-width: 566px;
+    width: 100%;
+}
+
+@media screen and (max-width: 1025px) {
     .background-main figure img {
         height: 100%;
         min-height: 598px;
@@ -147,6 +175,61 @@
         gap: 24px;
     }
 
+    .cards-macbook {
+        grid-gap: 10px;
+        justify-items: center;
+        align-items: center;
+        width: 100%;
+        height: 574px;
+        margin: auto;
+        position: relative;
+    }
+
+    .cards-macbook-container {
+        display: grid;
+        grid-auto-flow: column;
+        grid-template-areas:
+            "A B"
+            "C C";
+        column-gap: 14px;
+        row-gap: 24px;
+        justify-items: center;
+        align-items: center;
+        margin: auto;
+        position: relative;
+        padding: 0 23px;
+    }
+
+    .first-card-macbook {
+        grid-area: A;
+        max-width: 177px;
+        height: auto;
+    }
+
+    .first-card-macbook figure img {
+        width: 100%;
+    }
+
+    .second-card-macbook {
+        grid-area: B;
+        max-width: 177px;
+        height: auto;
+    }
+
+    .second-card-macbook figure img {
+        width: 100%;
+    }
+
+    .third-card-macbook {
+        grid-area: C;
+        max-width: 368px;
+        height: auto;
+    }
+
+    .third-card-macbook figure img {
+        width: 100%;
+    }
+
 }
 
 @media screen and (min-width: 2500px) {