Adiciona mobile 414px

assets/styles/main.css

@@ -136,7 +136,7 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
-  background: #FFFFFF;
+  background: #ffffff;
   box-shadow: 0px 4px 20px rgb(0 0 0 / 23%);
 }
 
@@ -166,14 +166,12 @@ body {
   padding: 0 30px;
 }
 
-.bottom-card-texto{
-
+.bottom-card-texto {
   flex-direction: column;
   text-align: center;
-
 }
 
-.bottom-infocard-titulo{
+.bottom-infocard-titulo {
   text-align: center;
   margin-bottom: 18px;
   font-weight: 600;
@@ -181,14 +179,13 @@ body {
   line-height: 20px;
 }
 
-.bottom-card-paragrafo{
+.bottom-card-paragrafo {
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;
   text-align: center;
   color: #000000;
   padding: 0 30px;
-
 }
 
 .page-footer {
@@ -217,6 +214,99 @@ body {
   color: #bdbdbd;
 }
 
+@media screen and (max-width: 412px) {
+  .top-infocard-subtitulo {
+    font-size: 20px;
+  }
+
+  .top-infocard-titulo {
+    font-size: 28px;
+  }
+
+  .top-infocard-paragrafo {
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    padding: 0 30px;
+  }
+
+  .middle-banners {
+    height: 484px;
+  }
+}
+
+@media screen and (max-width: 414px) {
+  .main-banner-desktop,
+  .bottom-infocard-img {
+    display: none;
+  }
+
+  .bottom-infocard-flex {
+    flex-direction: column;
+
+}
+
+  .bottom-infocard-img-mobile {
+    margin-bottom: 50px;
+  }
+}
+
+@media screen and (min-width: 415px) {
+  .main-banner-mobile,
+  .bottom-infocard-img-mobile {
+    display: none;
+  }
+}
+
+
+@media screen and (max-width: 415px) {
+
+  .bottom-infocard{
+      flex-direction: column;
+      padding: 80px 0 136px;
+  }
+
+  .bottom-infocard-img{
+      margin:0 0 50px;
+      width: 100%;
+      max-width: 596px;
+      display: none;
+      
+  }
+
+  .bottom-infocard-texto{
+      padding: 0 26px;
+  }
+
+  .bottom-infocard-titulo{
+      font-size: 24px;
+  }
+}
+
+@media screen and (max-width:768px) {
+  .top-cards {
+      grid-template-columns: 1fr;
+      padding: 36px 26px;   
+  }
+
+  .bottom-cards {
+    flex-direction: column;
+    grid-template-columns: 1fr;
+    padding: 80px 23px;
+
+}
+
+}
+
+@media screen and (min-width: 769px) and (max-width: 1200px) {
+
+  .top-cards {
+      grid-template-columns: repeat(2, max-content);
+      flex-direction: column;
+
+  }
+}
+
 @media screen and (max-width: 1024px) {
   /* Ate 1023 banner desktop nao aparece */
   .main-banner-desktop,