diff --git a/assents/imagens/banner01.png b/assents/imagens/banner-desktop.png
similarity index 100%
rename from assents/imagens/banner01.png
rename to assents/imagens/banner-desktop.png
diff --git a/assents/imagens/banner-mobile.png b/assents/imagens/banner-mobile.png
new file mode 100644
index 0000000..2da3a66
Binary files /dev/null and b/assents/imagens/banner-mobile.png differ
diff --git a/index.html b/index.html
index 69a0d92..01b1f7d 100644
--- a/index.html
+++ b/index.html
@@ -16,9 +16,12 @@
       <img class="header-logo" src="/assents/imagens/Logo M3 [branco] (4) 1.png" alt="logo da M3 Branco"/>
     </a>
   </header>
-  <main>
-
-  </main>
+    <main>
+      <section>
+        <img class="main-banner  main-banner-desktop" src="assents/imagens/banner-desktop.png" alt="Banner Principal">
+        <img class="main-banner  main-banner-mobile" src="assents/imagens/banner-mobile.png" alt="Banner Principal">
+      </section>
+    </main>
 
 
 </body>
diff --git a/main.styles/style.css b/main.styles/style.css
index 0eb8737..7b0ff27 100644
--- a/main.styles/style.css
+++ b/main.styles/style.css
@@ -5,10 +5,35 @@
 
   
 }
-
+/*///////////// HEADER /////////////////// */
 .page-header {
   background: #000000;
   display: flex;
   justify-content: center;
   padding: 28px 0;
+}
+
+.header-logo {
+  display: block;
+}
+
+/*///////////// SECTION 01 + @media desktop e mobile /////////////////// */
+
+.main-banner {
+  display: block;
+  width: 100%;
+  
+}
+
+@media screen and (max-width: 414px){
+  .main-banner-desktop {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 415px ) {
+  .main-banner-mobile{
+    display: none;
+  }
+  
 }
\ No newline at end of file