Adiciona banners principais desktop e mobile

assets/styles/main.css

@@ -15,3 +15,20 @@
     display: block; 
 }
 
+.main-banner {
+    width: 100%;
+}
+
+@media screen and (max-width: 414px) { /*esse pixel pq é o tamanho maximo da imagem banner mobile*/
+
+    .main-banner-desktop{
+        display: none;
+    }    
+}
+
+@media screen and (min-width: 415px) { /*esse pixel pq é o tamanho maximo da imagem banner mobile*/
+
+    .main-banner-mobile{
+        display: none;
+    }    
+}

index.html

@@ -15,8 +15,14 @@
         <header class="page-header">
             <a href="/">
                 <img class="header-logo" src="assets/images/m3-logo.png" alt="Logo M3" />
-            </a>
+            </a>            
-            
         </header>
+
+        <main> 
+            <section>  
+                <img class="main-banner main-banner-desktop" src="/assets/images/main-banner-desktop.png" alt="Banner principal desktop" />
+                <img class="main-banner main-banner-mobile" src="/assets/images/main-banner-mobile.png" alt="Banner principal mobile" />
+            </section>
+        </main>
     </body>
 </html>