🎨 styles: change shape component list product with info

:%s

src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss

@@ -17,8 +17,11 @@
         @apply spacing-horizontal-left;
         @screen lg {
             max-width: 75%;
-            @apply custom-border-radius-lg bg-white;
+            padding: 0 .8rem;
-            padding: 4rem .8rem;
+            > div > div {
+                @apply shape-common-lg bg-white;
+                padding: 4rem 0;
+            }
             :global(.customArrow) {
                 @screen lg {
                     &:global(.leftArrow) {
@@ -31,18 +34,8 @@
             }
         }
         @screen xl {
-            padding: 4rem 2.4rem;
+            padding: 0 2.4rem;
             max-width: 80%;
-            :global(.customArrow) {
-                @screen lg {
-                    &:global(.leftArrow) {
-                        left: calc(-6.4rem + 1rem);
-                    }
-                    &:global(.rightArrow) {
-                        right: calc(-6.4rem + 1rem);
-                    }
-                }
-            }
         }
     }
 }

src/components/common/ListProductWithInfo/ListProductWithInfo.tsx

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

src/components/common/ProductCarousel/ProductCarousel.tsx

@@ -7,9 +7,9 @@ import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard'
 import s from "./ProductCarousel.module.scss"
 
 interface ProductCarouselProps
-  extends Omit<CarouselCommonProps<ProductCardProps>, 'Component'|"option"> {
+  extends Omit<CarouselCommonProps<ProductCardProps>, 'Component' | "option"> {
-		option?:TOptionsEvents
+  option?: TOptionsEvents
-	}
+}
 
 const OPTION_DEFAULT: TOptionsEvents = {
   slidesPerView: 2,
@@ -24,6 +24,9 @@ const OPTION_DEFAULT: TOptionsEvents = {
     '(min-width: 1008px)': {
       slidesPerView: 3.5,
     },
+    '(min-width: 1280px)': {
+      slidesPerView: 4.5,
+    },
     '(min-width: 1440px)': {
       slidesPerView: 5.5,
     },