feat: footer css responsivo

checkout/src/arquivos/js/components/Footer.js

@@ -160,7 +160,8 @@ export default class Footer {
                 slidesToShow: 4,
                 slidesToScroll: 1,
                 arrows: true,
-                Infinity: false
+                Infinity: false,
+
             });
         }
     }

checkout/src/arquivos/sass/checkout/_checkout.scss

@@ -11,9 +11,13 @@ html {
 footer .footerCheckout__wrapper {
     width: 94.9734%;
     margin: auto auto 0 auto;
+
+    @media only screen and (max-width: 1024px){
+        margin: auto 8px
+    }
 }
 footer .footerCheckout__prateleira,
-header {
+header .container {
     width: 79.53125%;
     margin: 0 auto;
 }
@@ -68,14 +72,15 @@ body {
 
 #cart-title,
 #orderform-title {
-    color: $color-gray2;
+    color: #292929;
-    font-family: $font-family;
+    font-family: 'Open Sans';
-    font-weight: 500;
+    font-weight: 700;
-    font-size: 36px;
+    font-size: 24px;
-    line-height: 42px;
+    line-height: 33px;
     margin: 40px 0 30px;
-    letter-spacing: 0.1em;
+    letter-spacing: 0.05em;
     text-transform: uppercase;
+    margin: 17px 0 16px;
 
     @include mq(md, max) {
         margin-left: 30px;

checkout/src/arquivos/sass/partials/_footer.scss

@@ -100,7 +100,7 @@
     };
 
     &__wrapper {
-        border-top: 1px solid $color-gray2;
+        border-top: 1px solid black;
         align-items: center;
         display: flex;
         margin: 0;
@@ -114,11 +114,21 @@
             margin: 0;
             justify-content: space-between;
             width: 100%;
+
+            @media only screen and (max-width: 1024px){
+                flex-direction: column;
+                align-items: normal;
+                justify-content: normal;
+                padding: 22px 0;
+            }
+            @media only screen and (max-width: 375px){
+                margin-top: 16px;
+            }
         }
     }
 
     &__address {
-        color: $color-gray2;
+        color: #292929;
         font-family: $font-family;
         font-style: normal;
         font-weight: normal;
@@ -134,6 +144,21 @@
             margin-bottom: 24px;
             max-width: 100%;
         }
+
+        @media only screen and (min-width: 2500px){
+            font-size: 20px;
+            line-height: 27px;
+            width: 36.7682673%;
+            margin-right: 0;
+        }
+
+        @media only screen and (max-width: 1024px){
+            order: 2;
+            width: 100%;
+            margin: 16px 0;
+            line-height: 14px;
+            margin-left: 8px;
+        }
     }
 
     &__stamps {
@@ -141,13 +166,25 @@
         display: flex;
         justify-self: center;
         list-style: none;
-        width: 33.2329763%                                                ;
+        width: 33.2329763%;
         margin: 0 15.5471102% 0 0;
 
         @include mq(md, max) {
             align-self: center;
             margin-bottom: 12px;
         }
+        @media only screen and (min-width: 2500px){
+            margin: 0;
+            width: 46.876382%;
+        }
+        @media only screen and (max-width: 1024px){
+            order: 1;
+        }
+        @media only screen and (max-width: 375px){
+            width: 100%;
+            margin-bottom: 0;
+            align-self: normal;
+        }
 
         .footerCheckout__payments{
             .footerCheckout-payments-ul{
@@ -157,17 +194,35 @@
 
                 li{
                     margin-right: 13.35px;
+
+                    @media only screen and (max-width: 1024px){
+                        margin-right: 5px;
+                    }
                 }
 
                 img{
                     height: 20px;
+
+                    @media only screen and (min-width: 2500px){
+                        height: 39.06px;
+                        width: 69.63px;
+                    }
+                    @media only screen and (max-width: 1024px){
+                        min-width: 35px;
+                    }
+
                 }
             }
         }
         .footerCheckout__vtexpci{
             img{
-                width: 53px;
+                min-width: 53px;
                 height: 33px;
+
+                @media only screen and (min-width: 2500px){
+                    width: 103.52px;
+                    height: 64.46px;
+                }
             }
         }
 
@@ -187,12 +242,34 @@
         margin: 0;
         width: 17.8598%;
 
+        @media only screen and (min-width: 2500px){
+            width: 16.3827269%;
+        }
+
+        @media only screen and (max-width: 1024px){
+            order: 3;
+            width: 100%;
+            margin-left: 8px;
+        }
+
         li:last-child {
             margin-left: 10.73px;
 
+            @media only screen and (min-width: 2500px){
+                margin-left: 10.23px
+            }
+            @media only screen and (max-width: 1024px){
+                margin-left: 10.45px;
+            }
+
             .devolperByM3{
                 height: 15.65px;
                 width: 28.66px;
+
+                @media only screen and (min-width: 2500px){
+                    height: 30.56px;
+                    width: 55.98px;
+                }
             }
         }
 
@@ -212,11 +289,21 @@
                 font-family: 'Open Sans';
                 font-size: 9px;
                 line-height: 12px;
-                color: black;
+                color: #292929;
+
+                @media only screen and (min-width: 2500px){
+                    font-size: 18px;
+                    line-height: 25px;
+                }
             }
             .devolperByVTEX{
                 height: 16px;
                 width: 44.92px;
+
+                @media only screen and (min-width: 2500px){
+                    height: 31.25px;
+                    width: 87.73px;
+                }
             }
         }
     }