Feat: Adiciona responsividade mobile

my-app/src/components/Footer/Footer.modules.scss

@@ -7,6 +7,11 @@
     align-items: center;
     padding-top: 20px;
     padding-bottom: 20px;
+    @media (max-width: 1024px){
+        flex-direction: column;
+        align-items: unset;
+        padding-left: 16px;
+    }
 }
 .footerText{
     & p{
@@ -20,24 +25,39 @@
         text-transform: capitalize;
         color: #FFFFFF;
     }
+    @media (max-width: 1024px){
+        order: 2;
+    }
 }
 .payments{
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: 12px;
+    @media (max-width: 1024px){
+        width: 398px;
+        height: 34px;
+    }
     & img{
         width: 36px;
         height: 20.2px;
+        @media (max-width: 1024px){
+            width: 36px;
+            height: 20.2px;
+        }
     }
 }
 .vtexPci{
     padding-left: 12px;
     border-left: 1px solid #C4C4C4;
-    & img{
-        width: 64.61px;
+    @media (max-width: 1024px){
+        width: 54.61px;
         height: 34px;
-    };
+    }
+    & img{
+        width: 54.61px;
+        height: 34px;
+    }
 }
 .Powered{
     display: flex;
@@ -54,4 +74,8 @@
         text-transform: capitalize;
         color: #FFFFFF;
     }
+    @media (max-width: 1024px){
+        justify-content: left;
+        order: 3;
+    }
 }

my-app/src/components/FooterTop/FooterTop.modules.scss

@@ -196,6 +196,9 @@
     text-transform: capitalize !important;
     color: #303030;
 }
+.iconsLinks{
+    margin-right: 50px;
+}
 .networkIcons{
     display: flex;
     gap: 10px;

my-app/src/components/FooterTop/FooterTop.tsx

@@ -46,7 +46,7 @@ const FooterTop = () => {
                     </ul>
                 </div>
 
-                <div>
+                <div className='iconsLinks'>
                     <div className='networkIcons'>
                         <a href="/"><img src={Facebook} alt="FacebooIcon" /></a>
                         <a href="/"><img src={Instagram} alt="InstagramIcon" /></a>