Adicionado bottom-cards

assets/styles/main.css

@@ -62,7 +62,6 @@ body {
 .top-cards {
   gap: 21px;
   display: grid;
-  background: #F0F0F0;
   justify-content: center;
   grid-template-columns: repeat(3, max-content);
 }
@@ -88,10 +87,17 @@ body {
 }
 
 .middle-banners {
+  background: #E0E0E0;
+  margin: 80px 0 62px;
+}
+
+.middle-banners-wrapper {
   gap: 39px;
   display: flex;
-  padding: 80px 72px;
+  padding: 0 72px;
   justify-content: center;
+  position: relative;  
+  top: 62px;
 }
 
 .middle-banner {
@@ -104,6 +110,66 @@ body {
   height: 100%;
 }
 
+.bottom-cards {
+    }
+
+.bottom-cards-wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, max-content);
+  justify-content: center;
+  gap: 16px;
+ 
+}
+
+.bottom-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 36px 32px 66px;
+  background: #FFFFFF;
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+}
+
+.bottom-card-image {
+  display: block;
+  margin-bottom: 14px;
+
+}
+
+.bottom-card-description {
+  max-width: 368px;
+  font-size: 16px;
+  line-height: 24px;
+  text-align: center;
+}
+
+.bottom-infocard {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 142px 0 180px;
+}
+
+.bottom-infocard-image {
+  margin-right: 40px;
+}
+
+.bottom-infocard-text {
+  max-width: 550px;
+}
+
+.bottom-infocard-title {
+  margin-bottom: 18px;
+  font-weight: 600;
+  font-size: 32px;
+  line-height: 1;
+}
+
+.bottom-infocard-description {
+  font-size: 16px;
+  line-height: 24px;
+}
+
 @media screen and (max-width: 414px) {
   .main-banner-desktop {
     display: none;

index.html

@@ -74,19 +74,66 @@
         </section>
 
         <section class="middle-banners">
-            <div class="middle-banner">
+            <div class="middle-banners-wrapper">
-                <div>
+                <div class="middle-banner">
-                    <img class="middle-banner-one" src="./assets/images/middle-banner-01.png"
+                    <div>
-                        alt="Banner do Meio Um" />
+                        <img class="middle-banner-one" src="./assets/images/middle-banner-01.png"
+                            alt="Banner do Meio Um" />
+                    </div>
+                    <div>
+                        <img class="middle-banner-two" src="./assets/images/middle-banner-02.png"
+                            alt="Banner do Meio Dois" />
+                    </div>
                 </div>
-                <div>
+                <div class="middle-banner">
-                    <img class="middle-banner-two" src="./assets/images/middle-banner-02.png"
+                    <img class="middle-banner-three" src="./assets/images/middle-banner-03.png"
-                        alt="Banner do Meio Dois" />
+                        alt="Banner do Meio Tres" />
                 </div>
             </div>
-            <div class="middle-banner">
+        </section>
-                <img class="middle-banner-three" src="./assets/images/middle-banner-03.png"
+
-                    alt="Banner do Meio Tres" />
+        <section class="bottom-cards">
+            <div class="bottom-cards-wrapper">
+                <div class="bottom-card">
+                    <img class="bottom-card-image" src="/assets/images/bottom-banner-01.png"
+                        alt="Imagem do Primeiro Card do de Baixo" />
+                    <p class="bottom-card-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.
+                    </p>
+                </div>
+
+                <div class="bottom-card">
+                    <img class="bottom-card-image" src="/assets/images/bottom-banner-02.png"
+                        alt="Imagem do Segundo Card do de Baixo" />
+                    <p class="bottom-card-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.
+                    </p>
+                </div>
+
+                <div class="bottom-card">
+                    <img class="bottom-card-image" src="/assets/images/bottom-banner-03.png"
+                        alt="Imagem do Terceiro Card do de Baixo" />
+                    <p class="bottom-card-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.
+                    </p>
+                </div>
+
+                <div class="bottom-card">
+                    <img class="bottom-card-image" src="/assets/images/bottom-banner-04.png"
+                        alt="Imagem do Quarto Card do de Baixo" />
+                    <p class="bottom-card-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.
+                    </p>
+                </div>
+
             </div>
         </section>
     </main>