assets/styles/main.css

@@ -117,8 +117,27 @@ body{
     width: 100%;
 
 }
+.middlecards{
+    display:flex;
+    margin: 129px 72px;
+    gap:16px;
+    background: #FFFFFF;
+}
+.middlecard{
+    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+    text-align: center;
+    padding:51px 32px 65px 32px;
+}
+.middlecard-text{
+    margin-top: 32px;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    min-width: 0;
+}
 
-@media screen and (max-width: 1023px){
+
+@media screen and (max-width: 767px){
     .topbannerdesktop{
         display:none;
     }
@@ -128,6 +147,8 @@ body{
     }
 }
 
+
+
 @media screen and (max-width: 1439px){
     .topinfo-texts{
         min-width: 86%;
@@ -160,7 +181,7 @@ body{
         margin: 0 10%;
     }
     .topcards-wrapper{
-        margin-top: 32px;
+        margin-top: 90px;
         margin-bottom: 80px;
         flex-direction:column;
         gap:24px;
@@ -184,17 +205,26 @@ body{
         margin: 0 23px;
     }
     .middle-img1{
-        width: 100%;
         grid-area: 1 / 3 / 2 / 5;
     }
     .middle-img2{
-        width: 100%;
+
         grid-area: 1 / 1 / 2 / 3; 
     }
     .middle-img3{
-        width: 100%;
         grid-area: 2 / 1 / 3 / 5;
     }
+    .middlecards{
+        gap:16px;
+        margin: 80px 23px;
+        flex-direction: column;
+    }
+    .middlecard{
+    }
+    .middlecard-text{
+        font-size: 14px;
+
+    }
 }
 
 @media screen and (min-width: 2500px){
@@ -229,5 +259,9 @@ body{
         font-size: 32px;
         line-height: 48px;
     }
+    .middlecard-text{
+        font-size: 32px;
+        line-height: 48px;
+    }
 
 }

index.html

@@ -59,8 +59,8 @@
                 </div>
             </div>
         </section>
-        <main class="middle">
-            <section>
+        <main>
+            <section class="middle">
                 <div class="middle-wrapper">
                     <div class="gridimg">
                         <img src="./assets/images/img/middlenote1.png" class="middle-img1" alt="Primeiro notebook meio">
@@ -70,6 +70,32 @@
                     </div>
                 </div>
             </section>
+            <section class="middlecards">
+                <div class="middlecard">
+                    <figure>
+                        <img src="./assets/images/img/middlecard.png" alt="Primeira imagem dos cards do meio">
+                        <figcaption class="middlecard-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
+                    </figure>
+                </div>
+                <div class="middlecard">
+                    <figure>
+                        <img src="./assets/images/img/middlecard2.png" alt="Segunda imagem dos cards do meio">
+                        <figcaption class="middlecard-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
+                    </figure>
+                </div>
+                <div class="middlecard">
+                    <figure>
+                        <img src="./assets/images/img/middlecard3.png" alt="Terceira imagem dos cards do meio">
+                        <figcaption class="middlecard-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
+                    </figure>
+                </div>
+                <div class="middlecard">
+                    <figure>
+                        <img src="./assets/images/img/middlecard4.png" alt="Quarta imagem dos cards do meio">
+                        <figcaption class="middlecard-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
+                    </figure>
+                </div>
+            </section>
         </main>
 
 </body>