feat: adiciona middle banner desktop e mobile

assets/styles/main.css

@@ -97,6 +97,30 @@ body {
     max-width: 300px;
 }
 
+.middle-banner {
+    display: flex;
+    margin-top: 80px;
+    background: #E0E0E0;
+    justify-content: center;
+    padding: 0 72px;
+
+}
+
+.middle-banner-image-wrapper {
+    display: flex;
+    gap: 40px;
+    justify-content: center; 
+    position: relative;
+    bottom: -62px;
+}
+
+
+.middle-banner-image img {
+    max-width: 566px;
+    width: 100%;    
+}
+
+
 @media screen and (max-width: 414px) {
 
     .main-banner {
@@ -134,6 +158,43 @@ body {
         grid-template-columns: 1fr;
         padding: 0 32px;
     }
+    
+    .middle-banner {
+        padding: 0 23px;
+    }
+
+    .middle-banner-image-wrapper {
+        display: grid;
+        grid-area: auto;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: auto;
+        grid-template-areas: 
+        "b a"
+        "c c";
+        column-gap: 14px;
+        row-gap: 24px;   
+    }
+
+    .middle-banner-image img {
+        max-width: unset;
+    }
+
+
+    .middle-banner-image.a {
+        grid-area: a;
+        width: 100%;
+    }
+    
+    .middle-banner-image.b {
+        grid-area: b;
+        width: 100%;
+    }
+
+    .middle-banner-image.c {
+        grid-area: c;
+        width: 100%;
+    }        
+
 }
 
 @media screen and (max-width: 290px) {

index.html

@@ -22,7 +22,7 @@
 
         <main>       
             <div>
-                <img class="main-banner" src="assets/image/main-banner-desktop.png" alt="Banner Principal">
+                <img class="main-banner" src="assets/image/main-banner-desktop.png" alt="Banner exibindo imagem com códigos de programação">
             </div>
 
             <section class="top-infocard">
@@ -37,32 +37,48 @@
                 </div>
                 
                 <div class="top-infocard-image" >
-                    <img src="assets/image/top-inforcard-image.png" alt="Banner do Infocard do Topo">
+                    <img src="assets/image/top-inforcard-image.png" alt="Figura representando conexão entre computadores">
                 </div>
             </section>
             
-            <section class="top-cards">
+            <div class="top-cards">
                 <figure class="top-card">
-                    <img class="top-card-image" src="assets/image/top-cards-image01.svg" alt="">
+                    <img class="top-card-image" src="assets/image/top-cards-image01.svg" alt="Figura representando uma loja">
                     <figcaption class="top-card-description">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
                     </figcaption>                
                 </figure>
 
                 <figure class="top-card">
-                    <img class="top-card-image" src="assets/image/top-cards-image02.svg" alt="">
+                    <img class="top-card-image" src="assets/image/top-cards-image02.svg" alt="Figura representando uma sacola de compras">
                     <figcaption class="top-card-description">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.     
                     </figcaption>                
                 </figure>
 
                 <figure class="top-card">
-                    <img class="top-card-image" src="assets/image/top-cards-image03.svg" alt="">
+                    <img class="top-card-image" src="assets/image/top-cards-image03.svg" alt="Figura representando uma mão com uma moeda acima">
                     <figcaption class="top-card-description">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
                     </figcaption>               
                 </figure>
-            </section>
+            </div>
+
+            <div class="middle-banner">
+                <div class="middle-banner-image-wrapper">
+                    <div class="middle-banner-image a" >
+                        <img src="assets/image/middle-banner1.png" alt="Imagem de um Laptop">
+                    </div>
+                    
+                    <div class="middle-banner-image b">
+                        <img src="assets/image/middle-banner2.png" alt="Imagem de um Laptop">
+                    </div>
+                    <div class="middle-banner-image c">
+                        <img src="assets/image/middle-banner3.png" alt="Imagem de um Laptop">
+                    </div>
+                </div>
+            </div>
+
         </main>
     </body>
 </html>