feat(home): Adiciona banner principal mobile

assets/styles/styles.css

@@ -5,11 +5,12 @@
     box-sizing: border-box;
 }
 /*Definindo escopos*/
+.page-banner-principal-mobile,
 .page-logo,
-.page-banner-principal{
+.page-banner-principal-desktop{
     width: 100%;
 }
-/* Estilo menu/header*/
+/*Estilo menu/header*/
 .page-logo{
     display: flex;
     align-items: center;
@@ -22,4 +23,19 @@
     display: block;
 }
 
+/*Banner mobile*/
 
+.page-banner-principal-mobile{
+    display: none;
+}
+
+
+@media screen and (max-width: 1024px){
+    .page-banner-principal-mobile{
+        display: block;
+    }
+
+    .page-banner-principal-desktop{
+        display: none;
+    }
+}

index.html

@@ -17,9 +17,12 @@
                 <a href="/"><img class="logo-m3academy" src="./assets/svgs/logo-m3academy.svg" alt="Logo M3 Academy"></a>
             </nav>
         </header>
-        <!--Banner Principal-->
+        <!--Banner Principal desktop e mobile-->
         <div>
-            <figure><img class="page-banner-principal" src="./assets/images/banner-principal.png" alt="Banner Principal"></figure>
+            <figure>
+                <img class="page-banner-principal-desktop" src="./assets/images/banner-principal-desktop.png" alt="Banner Principal Desktop">
+                <img class="page-banner-principal-mobile" src="./assets/images/banner-principal-mobile.png" alt="Banner Principal Mobile">
+            </figure>
         </div>
         
     </body>