feat: ajuste das imagens central para mobile

html/index.html

@@ -182,7 +182,7 @@
 
 
       <figure class="bottom-infocard-img-mobile">
-        <img src="" alt="">
+        <img src="/assents/assents-img/bottom-mobile-01.png" alt="">
 
       </figure>
 
@@ -202,8 +202,8 @@
       </div>
 
 
-      <figure>
-        <img class="bottom-infocard-image" src="/assents/assents-img/bottom-inforcard-99.png"
+      <figure class="bottom-infocard-image" >
+        <img src="/assents/assents-img/bottom-inforcard-99.png"
           alt="imagem de oculos sobre o computador">
 
       </figure>

html/main.styles/style.css

@@ -169,13 +169,6 @@
   font-size: 16px;
 }
 
-/*/////////////////  BOTTOM AREA COM IMAGEM + TEXTO /////////////////*/
-
-.bottom-infocard {
-  display: flex;
-  align-items: center;
-}
-
 /*////////////////section bottom 03///////////////////*/
 .bottom-infocard {
   padding: 108px 0px 116px 0px;
@@ -183,13 +176,11 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-
   background: #ffffff;
 }
 
 .bottom-infocard-image {
   display: block;
-
   width: 100%;
 }
 
@@ -270,7 +261,8 @@
   }
 
   .main-banner,
-  .bottom-infocard-img {
+  .bottom-infocard-img,
+  .bottom-infocard-image {
     display: none;
   }
 
@@ -293,6 +285,7 @@
 
   .infocard-center {
     flex-direction: column;
+    gap: 23px;
   }
 
   .bottom-cards {
@@ -309,7 +302,7 @@
 
   .bottom-infocard {
     flex-direction: column;
-    padding: 80px 0 135px 0;
+    padding: 0 0 87px;
   }
 
   .bottom-infocard-title {
@@ -321,6 +314,14 @@
     gap: 0;
   }
 
+  .bottom-infocard-img-mobile img {
+    width: 100%;
+  }
+
+  .bottom-inforcard-text {
+    margin-top: 50px;
+  }
+
   .footer-description {
     max-width: 261px;
   }