From c865c90c5cbc1ee5761114a80e76d6c64702cc7c Mon Sep 17 00:00:00 2001
From: devartes <anacavalcante731@gmail.com>
Date: Mon, 9 Jan 2023 12:13:14 -0300
Subject: [PATCH] style(footer): substituindo px por % no
 .Metodos__de__Pagamento

---
 src/components/Footer/Footer.module.scss | 216 +++++++++++++++++------
 src/components/Footer/FooterBottom.tsx   |   2 +-
 2 files changed, 166 insertions(+), 52 deletions(-)

diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
index 1990c3c..b8ac50c 100644
--- a/src/components/Footer/Footer.module.scss
+++ b/src/components/Footer/Footer.module.scss
@@ -64,109 +64,224 @@ footer {
         }
     }
     & .Metodos__de__Pagamento {
-        display: flex;
+        display: grid;
+        grid-template-areas: "A B C D E F G H I";
+        grid-template-columns: 9.043% 8.793% 8.793% 9.296% 8.793% 8.54% 9.043% 0px 13.719%;
+        grid-template-rows: 1fr;
         align-items: center;
-        justify-content: space-between;
-        max-width: 398.61px;
+        grid-column-gap: 0px;
+        grid-row-gap: 0px;
+        width: 36.85%;
         padding-left: 0;
         column-gap: 12px;
         @media (min-width: 2500px) {
-            max-width: 692px;
+            width: 30.0772%;
+            grid-template-columns: 10.117% 10.117% 10.117% 10.117% 10.117% 10.117% 10.117% 0px 15.319%;
+        }
+        @media (max-width: 2500px) and (min-width: 1281px) {
+            width: auto;
+        }
+        @media (max-width: 1279px) and (min-width: 1026px) {
+            width: auto;
+            transform: unset;
         }
         @media (max-width: 1025px) {
+            grid-template-columns: 9.033% 8.782% 8.782% 9.286% 8.782% 8.53% 9.033% 0px 13.70%;
+            width: 40.173%;
             order: 1;
         }
+        @media (max-width: 1023px) and (min-width: 377px) {
+            width: auto;
+            transform: unset;
+        }
         @media (max-width: 376px) {
+            width: 99.784%;
+            transform: unset;
             column-gap: 11px;
+            grid-template-columns: 8.745% 8.745% 8.745% 8.745% 8.745% 8.745% 8.745% 0px 13.121%;
         }
-        & .Line {
-            width: 1px;
-            height: 24px;
-            background: $primary-600;
-            flex: none;
-            flex-grow: 0;
-            @media (max-width: 1025px) {
-                width: 1px;
-                height: 20.36px;
-            }
+        @media (max-width: 373px){
+            grid-template-columns: auto;
         }
+
         & li {
             & img {
+                display: block;
                 width: 100%;
                 height: 100%;
             }
         }
-        & .MasterCard,
-        .Boleto {
+        & .MasterCard {
+            width: 100%;
+            grid-area: A ;
+            @media (min-width: 2500px) {
+                width: 100%;
+            }
+            @media (max-width: 1279px) and (min-width: 1026px) {
+                width: 100%;
+                transform: unset;
+            }
+            @media (max-width: 1025px) {
+                width: 100%;
+            }
+            @media (max-width: 1023px) and (min-width: 400px) {
+                width: 100%;
+                transform: unset;
+            }
+
+            @media (max-width: 376px) {
+                transform: unset;
+                width: 100%;
+                
+            }
             & img {
-                min-width: 36px;
                 height: 20.2px;
                 @media (min-width: 2500px) {
-                    min-width: 70px;
                     height: 39.27px;
                 }
                 @media (max-width: 376px) {
-                    min-width: 30px;
                     height: 17px;
                 }
             }
         }
-        & .Elo {
-            & img {
-                min-width: 37px;
-                height: 20.26px;
-                @media (min-width: 2500px) {
-                    min-width: 70px;
-                    height: 38.33px;
-                }
-                @media (max-width: 376px) {
-                    min-width: 30px;
-                    height: 17px;
-                }
+        & .Visa {
+            width: 100%;
+            grid-area: B;
+            @media (min-width: 2500px) {
+                width: 100%;
+            }
+            @media (max-width: 376px) {
+                transform: unset;
+                width: 100%;
             }
-        }
-        & .Visa,
-        .Diners,
-        .HiperCard {
             & img {
-                min-width: 35px;
                 height: 20.13px;
                 @media (min-width: 2500px) {
                     min-width: 70px;
                     height: 39.27px;
                 }
-                @media (max-width: 376px) {
-                    min-width: 30px;
-                    height: 17px;
+            }
+        }
+        & .Diners {
+            width: 100%;
+            grid-area: C;
+            @media (min-width: 2500px) {
+                width: 100%;
+            }
+            @media (max-width: 376px) {
+                width: 100%;
+            }
+            & img {
+                height: 20.13px;
+                @media (min-width: 2500px) {
+                    min-width: 70px;
+                    height: 39.27px;
                 }
             }
         }
-        & .Pagseguro {
+        & .Elo {
+            grid-area: D;
+            width: 100%;
+            @media (min-width: 2500px) {
+                width: 100%;
+            }
+            @media (max-width: 376px) {
+                width: 100%;
+            }
+            & img {
+                height: 20.26px;
+                @media (min-width: 2500px) {
+                    min-width: 70px;
+                    height: 38.33px;
+                }
+            }
+        }
+        & .HiperCard {
+            width: 100%;
+            grid-area: E;
+            @media (min-width: 2500px) {
+                width: 100%;
+            }
+            @media (max-width: 376px) {
+                width: 100%;
+            }
+            & img {
+                height: 20.13px;
+                @media (min-width: 2500px) {
+                    min-width: 70px;
+                    height: 39.27px;
+                }
+            }
+        }
+
+        & .Pagseguro {
+            grid-area: F;
+            width: 100%;
+            @media (min-width: 2500px) {
+                width: 100%;
+            }
+            @media (max-width: 376px) {
+                width: 100%;
+            }
             & img {
-                min-width: 34px;
                 height: 19.07px;
                 @media (min-width: 2500px) {
                     min-width: 70px;
                     height: 39.27px;
                 }
-                @media (max-width: 376px) {
-                    min-width: 30px;
-                    height: 17px;
+            }
+        }
+
+        & .Boleto {
+            grid-area: G;
+            width: 100%;
+            @media (min-width: 2500px) {
+                width: 100%;
+            }
+            @media (max-width: 376px) {
+                width: 100%;
+            }
+            & img {
+                height: 20.2px;
+                @media (min-width: 2500px) {
+                    min-width: 70px;
+                    height: 39.27px;
                 }
             }
         }
+
+        & .Line {
+            grid-area: H;
+            & span {
+                width: 1px;
+                height: 24px;
+                display: block;
+                background: $primary-600;
+                flex: none;
+                flex-grow: 0;
+                @media (max-width: 1025px) {
+                    width: 1px;
+                    height: 20.36px;
+                }
+            }
+        }
+
         & .VtexPci {
+            grid-area: I;
+            width: 100%;
+            @media (min-width: 2500px) {
+                width: 100%;
+            }
+            @media (max-width: 376px) {
+                width: 100%;
+            }
             & img {
-                min-width: 54.61px;
                 height: 34px;
                 @media (min-width: 2500px) {
                     min-width: 106px;
                     height: 66px;
                 }
-                @media (max-width: 376px) {
-                    min-width: 45px;
-                    height: 28px;
-                }
+                
             }
         }
     }
@@ -462,9 +577,8 @@ footer {
                 right: 16px;
                 top: calc(100% - 259px);
                 z-index: 1;
-                @media (min-width: 2500px){
+                @media (min-width: 2500px) {
                     top: calc(100% - 353.76px);
-                    
                 }
                 @media (max-width: 1025px) {
                     position: fixed;
diff --git a/src/components/Footer/FooterBottom.tsx b/src/components/Footer/FooterBottom.tsx
index 2318401..a5b33c0 100644
--- a/src/components/Footer/FooterBottom.tsx
+++ b/src/components/Footer/FooterBottom.tsx
@@ -25,7 +25,7 @@ const FooterBottom = () => {
         <li className={styles["HiperCard"]}><img src={HiperCard} alt="ícone do cartão hipercard"/></li>
         <li className={styles["Pagseguro"]}><img src={Pagseguro} alt="ícone do meio de pagamento pagseguro"/></li>
         <li className={styles["Boleto"]}><img src={Boleto} alt="ícone do meio de pagamento boleto"/></li>
-        <span className={styles["Line"]}></span>
+        <li className={styles["Line"]}><span></span></li>
         <li className={styles["VtexPci"]}><img src={VtexPci} alt="ícone do vtex pci"/></li>
       </ul>
       <ul className={styles["Autores"]}>