From ffa3756bc7cdeedfff4687a92eeaed925d406887 Mon Sep 17 00:00:00 2001
From: ThiagoDuutra <thiagoduutra01@gmail.com>
Date: Thu, 15 Dec 2022 12:07:05 -0300
Subject: [PATCH] feat: Cria responsividade prateleira

---
 checkout/src/arquivos/js/components/Footer.js |  7 +++++
 .../arquivos/sass/partials/_prateleira.scss   | 27 +++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 58b0f78..d03b99f 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -139,6 +139,13 @@ export default class Footer {
                         slidesToScroll: 1,
                     },
                 },
+                {
+                    breakpoint: 720,
+                    settings: {
+                        slidesToShow: 2,
+                        slidesToScroll: 2,
+                    },
+                },
             ],
         });
     }
diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss
index 3375cba..5280ebb 100644
--- a/checkout/src/arquivos/sass/partials/_prateleira.scss
+++ b/checkout/src/arquivos/sass/partials/_prateleira.scss
@@ -6,6 +6,10 @@
         justify-content: center;
         flex-direction: column;
 
+        @media (max-width: 1024px) {
+            width: 98% !important;
+        }
+
         h2 {
             font-weight: 400;
             font-size: 24px;
@@ -24,6 +28,15 @@
                 width: 242px;
                 height: 242px;
                 background: $color-gray3;
+
+                @media (max-width: 1024px) {
+                    width: 320px;
+                    height: 320px;
+                }
+                @media (max-width: 350px) {
+                    width: 164px;
+                    height: 164px;
+                }
             }
             .prateleira-text {
                 color: $color-black;
@@ -35,6 +48,9 @@
                 margin-bottom: 25px;
                 align-items: center;
                 justify-content: center;
+                @media (max-width: 350px) {
+                    flex-wrap: wrap;
+                }
 
                 button {
                     display: flex;
@@ -64,8 +80,19 @@
             top: 43%;
         }
 
+        .slick-prev {
+            @media (max-width: 350px) {
+                top: 45%;
+                left: 0;
+            }
+        }
+
         .slick-next {
             right: 30px;
+            @media (max-width: 350px) {
+                top: 45%;
+                right: 15px;
+            }
         }
 
         .btn-list-prateleira {