react-project/src/components/Footer/Developed.tsx

@@ -9,14 +9,14 @@ const Developed = () => {
       <span>Powered By</span>
       <a href="https://vtex.com/br-pt/" target="_blank">
         <figure>
-          <img src={vtex} alt="Logo VTEX" />
+          <img className={developed["vtex"]} src={vtex} alt="Logo VTEX" />
         </figure>
       </a>
 
       <span>Developed By</span>
       <a href="https://agenciam3.com/" target="_blank">
         <figure>
-          <img src={m3} alt="Logo M3" />
+          <img className={developed["m3"]} src={m3} alt="Logo M3" />
         </figure>
       </a>
     </div>

react-project/src/components/Footer/FooterBottom.tsx

@@ -10,7 +10,6 @@ import elo from "./assets/svgs/elo.svg";
 import hiper from "./assets/svgs/hiper.svg";
 import paypal from "./assets/svgs/paypal.svg";
 import boleto from "./assets/svgs/boleto.svg";
-import divisor from "./assets/svgs/divisor.svg";
 import vtexPci from "./assets/svgs/vtex-pci.svg";
 
 const FooterBottom = () => {
@@ -20,6 +19,7 @@ const FooterBottom = () => {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
         tempor
       </p>
+
       <div className={footer["footer__icons"]}>
         <ul>
           <Payments icon={master} alt="Cartão MasterCard" />
@@ -30,9 +30,9 @@ const FooterBottom = () => {
           <Payments icon={paypal} alt="Cartão Paypal" />
           <Payments icon={boleto} alt="Boleto" />
         </ul>
-        <figure>
-          <img src={divisor} alt="Divisor de icones" />
-        </figure>
+
+        <div></div>
+
         <figure>
           <img src={vtexPci} alt="Vtex PCI" />
         </figure>

react-project/src/components/Footer/assets/modules/Developed.module.scss

@@ -3,11 +3,20 @@
   align-items: center;
   gap: 13px;
 
+  @media screen and (min-width: 2500px) {
+    gap: 12px;
+  }
+
   span {
     font-weight: 400;
     font-size: 10px;
     line-height: 12px;
     color: var(--white);
+
+    @media screen and (min-width: 2500px) {
+      font-size: 20px;
+      line-height: 23px;
+    }
   }
 
   a {
@@ -15,6 +24,26 @@
 
     figure {
       display: contents;
+
+      .vtex {
+        width: 44.92px;
+        height: 16px;
+
+        @media screen and (min-width: 2500px) {
+          width: 84.22px;
+          height: 30px;
+        }
+      }
+
+      .m3 {
+        width: 28.66px;
+        height: 15.65px;
+
+        @media screen and (min-width: 2500px) {
+          width: 54.95px;
+          height: 30px;
+        }
+      }
     }
   }
 }

react-project/src/components/Footer/assets/modules/FooterBottom.module.scss

@@ -12,6 +12,12 @@
     line-height: 12px;
     color: var(--white);
     text-transform: capitalize;
+
+    @media screen and (min-width: 2500px) {
+      width: 467px;
+      font-size: 20px;
+      line-height: 23px;
+    }
   }
 
   &__icons {
@@ -30,12 +36,32 @@
 
         figure {
           display: contents;
+
+          img {
+            @media screen and (min-width: 2500px) {
+              width: 70px;
+              height: 40px;
+            }
+          }
         }
       }
     }
 
+    div {
+      background-color: var(--gray-100);
+      width: 1px;
+      height: 24px;
+    }
+
     figure {
       display: contents;
+
+      img {
+        @media screen and (min-width: 2500px) {
+          width: 106px;
+          height: 66px;
+        }
+      }
     }
   }
 }