feat: Cria artigo inferior desktop

index.html

@@ -149,6 +149,25 @@
 
         </div>
 
+        <article class="bottom-article">
+            <div class="bottom-article-text">
+                <h2 class="bottom-article-title">
+                    Lorem ipsum dolor sit amet
+                </h2>
+
+                <p class="bottom-article-description">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. 
+                    Quisque  a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
+                    Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
+                </p>
+            </div>
+
+            <figure class="bottom-article-figure">
+                <img class="bottom-banner bottom-banner-desktop" src="./assets/imgs/bottom-banner-desktop.png" alt="Banner Inferior Desktop">
+                <img class="bottom-banner bottom-banner-mobile" src="./assets/imgs/bottom-banner-mobile.png" alt="Banner Inferior Mobile">
+            </figure>
+        </article>
+
     </body>
 
 </html>

styles/main.css

@@ -150,8 +150,41 @@ body{
     width: 85%;
 }
 
+.bottom-article{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 50px;
+    margin-bottom: 116px;
+}
+
+.bottom-article-text{
+    max-width: 29%;
+}
+
+.bottom-article-figure{
+    width: 71%;
+}
+
+.bottom-article-title{
+    font-weight: 600;
+    font-size: 32px;
+    line-height: 39px;
+}
+
+.bottom-article-description{
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+}
+
+.bottom-banner{
+    width: 100%;
+}
+
 @media screen and (max-width: 1024px){
-    .main-banner-desktop{
+    .main-banner-desktop,
+    .bottom-banner-desktop{
         display: none;
     }
 
@@ -218,7 +251,8 @@ body{
 }
 
 @media screen and (min-width: 1025px){
-    .main-banner-mobile{
+    .main-banner-mobile,
+    .bottom-banner-mobile{
         display: none;
     }
 
@@ -228,7 +262,8 @@ body{
 }
 
 @media screen and (min-width: 2500px){
-    .top-infocard-subtitle{
+    .top-infocard-subtitle,
+    .bottom-article-title{
         font-size: 64px;
         line-height: 78px;
     }
@@ -240,7 +275,8 @@ body{
 
     .top-infocard-description,
     .top-card-text,
-    .bottom-card-text{
+    .bottom-card-text,
+    .bottom-article-description{
         font-size: 32px;
         line-height: 48px;
     }