feat(home): Adiciona parte do banner do meio desktop

assets/css/style.css

@@ -14,6 +14,7 @@ body {
   padding: 28px 0;
   justify-content: center;
   background-color: #000000;
+  width: 100%;
 }
 
 .header-logo {
@@ -96,6 +97,18 @@ body {
   text-align: center;
 }
 
+.middle-banners {
+  background: #e0e0e0;
+  width: 100%;
+}
+.middle-banners-wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, max-content);
+  justify-content: center;
+  gap: 40px;
+  margin: 0 72px 0;
+}
+
 @media screen and (max-width: 1023px) {
   .main-banner-desktop {
     display: none;
@@ -104,7 +117,7 @@ body {
     padding-bottom: 90px;
   }
   .top-inforcard-text {
-    margin: 0 7% 0;
+    margin: 0 28px 0;
   }
 
   .top-infocard-subtitle {
@@ -114,10 +127,11 @@ body {
   .top-infocard-title {
     font-size: 28px;
     line-height: 34px;
-    margin-bottom: 66px;
+    margin-bottom: 14px;
   }
   .top-infocard-description {
     line-height: 24px;
+    margin-bottom: 66px;
   }
 
   .top-cards {

index.html

@@ -77,6 +77,19 @@
                 </figcaption>
             </figure>
         </section>
+        <section class="middle-banners">
+            <div class="middle-banners-wrapper">
+                <figure class="middle-banner">
+                    <img src="/assets/imagens/middle-banner-image-01.png" alt="Imagem do Banner do Meio">
+                </figure>
+                <figure class="middle-banner">
+                    <img src="/assets/imagens/middle-banner-image-02.png" alt="Imagem do Banner do Meio">
+                </figure>
+                <figure class="middle-banner">
+                    <img src="/assets/imagens/middle-banner-image-03.png" alt="Imagem do Banner do Meio">
+                </figure>
+            </div>
+        </section>
 
     </main>
 </body>