🎨 styles: product carousel responsive

:%s

src/components/common/ButtonCommon/ButtonCommon.module.scss

@@ -94,7 +94,10 @@
 
   &.onlyIcon {
     .inner {
+      padding: 1rem;
+      @screen md {
         padding: 1.6rem;
+      }
       .icon {
         margin: 0;
       }

src/components/common/ProductCard/ProductCard.module.scss

@@ -1,5 +1,5 @@
 .productCardWarpper {
-    max-width: 20.8rem;
+    max-width: 22.4rem;
     min-height: 31.8rem;
     padding: 1.2rem 1.2rem 0 1.2rem;
     margin: auto;
@@ -62,5 +62,18 @@
         .cardIcon {
             margin-right: 0.8rem;
         }
+        .cardButton {
+            button {
+                > div {
+                    span {
+                        display: -webkit-box;
+                        -webkit-line-clamp: 1;
+                        -webkit-box-orient: vertical;
+                        overflow-y: hidden;
+                        text-overflow: ellipsis;
+                    }
+                }
+            }
+        }
     }
 }

src/components/common/ProductCarousel/ProductCarousel.tsx

@@ -19,11 +19,12 @@ const OPTION_DEFAULT: TOptionsEvents = {
       slidesPerView: 3,
     },
     '(min-width: 768px)': {
-      slidesPerView: 4,
+      slidesPerView: 3,
     },
-    '(min-width: 1024px)': {
-      slidesPerView: 4.5,
-    },'(min-width: 1280px)': {
+    '(min-width: 1008px)': {
+      slidesPerView: 3.5,
+    },
+    '(min-width: 1440px)': {
       slidesPerView: 5.5,
     },
   },