feat: cria conteiner de banner mosaico para versao desktop e mobile

Banner mosaico composto por tres imagens, onde na versão desktop fica alinhado em 3 colunas e uma linha e na versão mobile é composto por duas linhas e duas colunas, onde a imagem abaixo é o dobro do tamanho das outras. Feito em grid, se adapta aos tamanhos de tela.

index.html

@@ -32,7 +32,7 @@
                     alt="Notebook aberto com codigos HTML e CSS.">
             </figure>
         </div>
-        <!-- CONTAINER ABAIXO DO BANNER -->
+        <!-- REGIAO ABAIXO DO BANNER PRINCIPAL-->
         <div class="container-midle">
             <section class="container-midle-flex">
                 <h2 class="container-midle-subtitle">Lorem ipsum</h2>
@@ -73,8 +73,33 @@
                 </div>
             </section>
         </div>
+        <!-- REGIAO DO BANNER MOSAICO -->
+        <div class="wrapper-banner">
+            <div class="banner-mosaic">
+                <div class="mosaic-img1">
+                    <figure>
+                        <img class="mosaic-wrapper-img img1" src="assets/img/computer-img-1.png"
+                            alt="Notebook, posicionado de frente. Aberto em cerca de 45 graus>">
+                    </figure>
+                </div>
+                <div class="mosaic-img2">
+                    <figure>
+                        <img class="mosaic-wrapper-img img2" src="assets/img/computer-img-2.png"
+                            alt="Notebook, posicionado de frente, imagem feita de cima para baixo. Aberto em cerca de 60 graus>"
+                            </figure>
+                </div>
+                <div class="mosaic-img3">
+                    <figure>
+                        <img class="mosaic-wrapper-img img3" src="assets/img/computer-img-3.png"
+                            alt="Notebook, posicionado de angulo lateal. Aberto em 60">
+                </div>
+                </figure>
+            </div>
+            </section>
+        </div>
+        <div style="width: 100%; height: 300px; ">
 
-
+        </div>
     </main>
 </body>
 

style/style.css

@@ -5,7 +5,6 @@
     font-family: 'Inter', sans-serif;
 }
 
-
 /* variaveis de cores */
 
 :root {
@@ -16,7 +15,6 @@
     --grey-footer: #BDBDBD;
 }
 
-
 /* HEADER DA PAGINA */
 
 header {
@@ -32,10 +30,6 @@ header {
     display: block;
 }
 
-main {
-    background-color: var(--white);
-}
-
 
 /* BANNER DESKTOP */
 
@@ -48,7 +42,6 @@ main {
     display: none;
 }
 
-
 /* AREA ABAIXO DO BANNER */
 
 .container-midle-flex {
@@ -103,7 +96,7 @@ main {
     grid-template-areas:
         "card-1 card-2 card-3";
     justify-content: center;
-    width: 100%;    
+    width: 100%;
     padding: 10% 22% 4%;
 }
 
@@ -149,19 +142,55 @@ main {
 
 }
 
+/* Banner Mosaico */
+.wrapper-banner {
+    width: 100%;
+    background-color: var(--grey);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 
+.banner-mosaic {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 1fr;
+    grid-template-areas: "mosaic-img1 mosaic-img2 mosaic-img3";
+    gap: 40px;
+    padding: 0 72px;
+    transform: translateY(60px);
+    z-index: 999;
 
+}
+
+.mosaic-img1 {
+    grid-area: mosaic-img1;
+}
+
+.mosaic-img2 {
+    grid-area: mosaic-img2;
+}
+
+.mosaic-img3 {
+    grid-area: mosaic-img3;
+}
+
+.mosaic-wrapper-img {
+    width: 100%;
+    display: block;
+}
 
 
 
 
 /* Medias Queries*/
-@media (min-width:2500px) {
+@media screen and (min-width:2500px) {
-    .container-cards{
+    .container-cards {
         padding: 6% 30% 4%;
     }
 }
-@media (max-width:1024px) {
+
+@media screen and (max-width:1024px) {
 
     /* BANNER MOBILE */
     .banner-img-desktop {
@@ -172,9 +201,6 @@ main {
         display: block;
     }
 
-    main {
-        background-color: var(--grey-footer);
-    }
 
     /* AREA ABAIXO DO BANNER */
 
@@ -223,18 +249,50 @@ main {
         gap: 24px;
         grid-auto-flow: row;
         grid-template-areas:
-            "card-1" 
+            "card-1"
             "card-2"
             "card-3";
         justify-content: center;
-        padding:90px 32px 80px;
+        padding: 90px 32px 80px;
     }
-    
-.subtitle-card {
-    max-width: 72%;
-    margin: 0 auto;
-    text-align: center;
 
-}
+    .subtitle-card {
+        max-width: 72%;
+        margin: 0 auto;
+        text-align: center;
+
+    }
+
+    /*REGIAO DO BANNER MOSAICO */
+
+    .banner-mosaic {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: 2fr;
+        grid-template-areas:
+            "mosaic-img2 mosaic-img1"
+            "mosaic-img3 mosaic-img3";
+        gap: 24px 14px;
+        padding: 0 24px;
+        transform: translateY(32px);
+    }
+
+    .img1,
+    .img2 {
+        width: 100%;
+        height: 100%;
+        min-width: 50%;
+        min-height: 50%;
+    }
+
+    .img3 {
+        min-width: 90%;
+        min-height: 90%;
+    }
+
+
+
+
+
 
 }