feat: Cria Bottom cards

index.html

@@ -58,17 +58,51 @@
         <div class="container-middle-cards">
             <figure class="middle-banner">
                 <img class="middle-card-img middle-card-img-desktop" src="assets/imgs/middle-card1.png"
-                    alt="Primeira imagem principal">
+                    alt="Primeira imagem principal" />
             </figure>
 
             <figure class="middle-banner second-img-banner">
                 <img class="middle-card-img middle-card-img-desktop" src="assets/imgs/middle-card2.png"
-                    alt="Segunda imagem principal">
+                    alt="Segunda imagem principal" />
             </figure>
 
             <figure class="middle-banner">
                 <img class="middle-card-img middle-card-img-desktop" src="assets/imgs/middle-card3.png"
-                    alt="Terceira imagem principal">
+                    alt="Terceira imagem principal" />
+            </figure>
+        </div>
+
+        <div class="bottom-cards">
+            <figure class="container-bottom-cards">
+                <img class="bottom-img-card" src="assets/imgs/money-card-bottom.png"
+                    alt="Primeiro card da parte de baixo" />
+                <figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+                    euismod enim non dui fringilla interdum. Lorem ipsum dolor
+                    sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
+            </figure>
+
+            <figure class="container-bottom-cards">
+                <img class="bottom-img-card" src="assets/imgs/coin-card-bottom.png"
+                    alt="Segundo card da parte de baixo" />
+                <figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+                    euismod enim non dui fringilla interdum. Lorem ipsum dolor
+                    sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
+            </figure>
+
+            <figure class="container-bottom-cards">
+                <img class="bottom-img-card" src="assets/imgs/laptop-card-bottom.png"
+                    alt="Terceiro card da parte de baixo" />
+                <figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+                    euismod enim non dui fringilla interdum. Lorem ipsum dolor
+                    sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
+            </figure>
+
+            <figure class="container-bottom-cards">
+                <img class="bottom-img-card" src="assets/imgs/phone-card-bottom.png"
+                    alt="Primeiro card da parte de baixo" />
+                <figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+                    euismod enim non dui fringilla interdum. Lorem ipsum dolor
+                    sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
             </figure>
         </div>
     </div>

style/main.css

@@ -41,30 +41,30 @@
 }
 
 .main .top-cards {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(3, max-content);
-  gap: 21px;
   align-items: center;
   justify-content: center;
-  padding-bottom: 80px;
+  width: 100%;
+  gap: 21px;
 }
 
 .main .top-card {
   display: flex;
   align-items: center;
   flex-direction: column;
+  justify-content: center;
+  width: 18%;
+  gap: 30px;
+  padding: 36px 25px 26px;
   box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
-  padding: 26px 26px 34px;
-  background-color: var(--white);
 }
 
 .main .card-img {
   display: block;
-  margin-bottom: 26px;
+  width: 30%;
 }
 
 .main .card-description {
-  max-width: 300px;
   text-align: center;
   line-height: 24px;
   font-size: 16px;
@@ -89,6 +89,34 @@
   width: 100%;
 }
 
+.main .bottom-cards {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  padding: 0 72px;
+}
+
+.main .container-bottom-cards {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.23);
+  max-width: 100%;
+}
+
+.main .bottom-img-card {
+  display: block;
+  padding: 35px 25px;
+}
+
+.main .bottom-description {
+  font-size: 16px;
+  line-height: 24px;
+  text-align: center;
+  width: 84%;
+  padding-bottom: 17px;
+}
+
 /* --------------------------------------- */
 
 /* Banner-desktop / Banner-mobile*/
@@ -135,15 +163,20 @@
 
 /* Top-cards */
 
-@media (max-width: 1150px) {
+@media (max-width: 1024px) {
   .main .top-cards {
-    grid-template-columns: repeat(2, 1fr);
+    display: flex;
-    padding: 0 26px;
+    flex-direction: column;
+    padding: 0 23px;
+  }
+  .main .top-cards,
+  .main .top-card,
+  .main .card-description {
+    width: 100%;
   }
 
-  .main .card-3 {
+  .main .card-img {
-    grid-column-start: 1;
+    width: 17%;
-    grid-column-end: 3;
   }
 }
 
@@ -156,6 +189,12 @@
 
 /* Middle card*/
 
+@media (max-width: 1024px) {
+  .main .container-middle-cards {
+    padding: 0 23px;
+  }
+}
+
 @media (max-width: 768px) {
   .main .middle-cards {
     margin-top: 44px;
@@ -180,3 +219,13 @@
     grid-area: 1/1;
   }
 }
+
+/* Bottom cards */
+
+@media (max-width: 1024px) {
+  .main .bottom-cards {
+    display: flex;
+    flex-direction: column;
+    padding: 0 23px;
+  }
+}