feat: bottom infocard desktop e mobile

assets/styles/main.css

@@ -2,7 +2,7 @@
 {
     margin: 0;
     padding: 0;
-    box-sizing: border-box;
+    /*box-sizing: border-box;*/
 }
 
 body
@@ -169,9 +169,34 @@ body
     
 }
 
+.bottom-infocard{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
 
+.bottom-infocard-image{
+    width: 100%;
+    max-width: 1360px;
+}
 
+.bottom-infocard-text{
+    text-align: center;
+    max-width: 550px;
+    margin-bottom: 50px;
+}
 
+.bottom-infocard-title{
+    line-height: 1;
+    font-size: 32px;
+    font-weight: 600px;
+}
+
+.bottom-infocard-description{
+    font-size: 16px;
+    line-height: 24px;
+}
 
 
 
@@ -205,6 +230,30 @@ body
     }
 }
 
+@media screen and (max-width: 768px) 
+{
+    .dk {
+        display: none;
+    }
+
+    .mb {
+        margin-bottom: 50px;
+    }
+}
+
+@media screen and (min-width: 769px) 
+{
+    .mb {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 1500px) and (min-width: 769px) {
+    .dk {
+        max-width: 740px;
+    }
+}
+
 @media screen and (max-width: 768px)
 {
     .top-infocard
@@ -270,6 +319,7 @@ body
     .bottom-cards-wrapper{
        flex-direction: column;
     }
+
 }
 
 @media screen and (min-width: 769px) and (max-width: 1200px){
@@ -417,4 +467,16 @@ body
     margin: 20px 0;
 }
 
+}
+
+@media screen and (max-width: 580px) 
+{
+    .bottom-infocard-title{
+        font-size: 24px;
+        line-height: 29px;
+    }
+    
+    .bottom-infocard-description{
+        max-width: 350px;
+    }
 }

index.html

@@ -121,6 +121,25 @@
                     </div>
                 </div><!--bottom-cards-wrapper-->
             </section>
+
+            <section class="bottom-infocard">
+
+                <img class="bottom-infocard-image mb" src="./assets/imagens/bottom-infocard-img-mb.png" alt="Banner do Infocard de Baixo">
+
+                <div class="bottom-infocard-text">
+                    <h2 class="bottom-infocard-title">
+                        Lorem ipsum dolor sit amet
+                    </h2>
+
+                    <p class="bottom-infocard-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>
+
+                <img class="bottom-infocard-image dk" src="./assets/imagens/bottom-infocard-img-dk.png" alt="Banner do Infocard de Baixo" />
+
+            </section>
+
         </main>
     </body>