Adiciona o banner principal desktop e mobile

index.html

@@ -17,5 +17,21 @@
         alt="Logo da M3 Academy"
       />
     </header>
+    <!-- Corpo da pagina  -->
+    <main>
+      <!-- Banner principal -->
+      <figure>
+        <img
+          class="main-banner main-banner-desktop"
+          src="./assets/image/bannerPrincipalDesktop.png"
+          alt="Imagem de um notebook  com um código de programação aberto"
+        />
+        <img
+          class="main-banner main-banner-mobile"
+          src="./assets/image/bannerPrincipalMobile.png"
+          alt="Imagem de um notebook  com um código de programação aberto"
+        />
+      </figure>
+    </main>
   </body>
 </html>

styles/main.css

@@ -21,8 +21,33 @@ body {
   max-width: 12%;
 }
 
+/* Corpo da pagina */
+
+/* Banner principal */
+
+.main-banner {
+  width: 100%;
+}
+
+@media screen and (min-width: 1025px) {
+  /* Corpo da pagina */
+
+  /* Banner principal */
+  .main-banner-mobile {
+    display: none;
+  }
+}
+
 @media screen and (max-width: 1024px) {
+  /* Cabeçalho */
   .header-logo {
     max-width: 55%;
   }
+
+  /* Corpo da pagina */
+
+  /* Banner principal */
+  .main-banner-desktop {
+    display: none;
+  }
 }