🎨 styles: list product with info

:%s

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

@@ -7,6 +7,9 @@
   align-items: center;
   padding: 1rem 2rem;
   @screen md {
+    padding: 0.8rem 1.6rem;
+  }
+  @screen lg {
     padding: 0.8rem 3.2rem;
   }
   &:disabled {
@@ -84,11 +87,14 @@
       padding: 1rem;
     }
     @screen md {
-      padding: 1.6rem 4.8rem;
+      padding: 1.6rem 3.2rem;
       &.onlyIcon {
         padding: 1.6rem;
       }
     }
+    @screen lg {
+      padding: 1.6rem 4.8rem;
+    }
     &.loading {
       &::before {
         width: 2.4rem;

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

@@ -1,5 +1,23 @@
+@import "../../../../styles/utilities";
+
 .infoProducts {
+    @apply flex justify-between items-center spacing-horizontal;
+
     .top {
-        
+        .sub {
+            display: none;
+        }
     }
-}
+    @screen lg {
+        @apply block;
+        margin-right: 4rem;
+        padding: 0;
+        .top {
+            margin-bottom: 3.2rem;
+            .sub {
+                display: block;
+                margin-top: 0.4rem;
+            }
+        }
+    }
+}

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

@@ -1,11 +1,48 @@
-@import '../../../styles/utilities';
+@import "../../../styles/utilities";
 
 .listProductWithInfo {
-    background-color: #F5F4F2;
-    @screen md {
-        @apply flex;
+    background-color: var(--background);
+    border-top: 1rem solid var(--gray);
+    border-bottom: 1rem solid var(--gray);
+    padding-top: 6rem;
+    padding-bottom: 6rem;
+    @screen lg {
+        @apply flex spacing-horizontal-left;
+        padding-top: 5.6rem;
+        padding-bottom: 5.6rem;
+        border: none;
+        background-color: #f5f4f2;
     }
     .productsWrap {
-        @apply custom-border-radius-lg;
+        @apply spacing-horizontal-left;
+        @screen lg {
+            max-width: 75%;
+            @apply custom-border-radius-lg bg-white;
+            padding: 4rem .8rem;
+            :global(.customArrow) {
+                @screen lg {
+                    &:global(.leftArrow) {
+                        left: calc(-6.4rem + 3rem);
+                    }
+                    &:global(.rightArrow) {
+                        right: calc(-6.4rem + 3rem);
+                    }
+                }
+            }
+        }
+        @screen xl {
+            padding: 4rem 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,13 +18,13 @@ const OPTION_DEFAULT: TOptionsEvents = {
             slidesPerView: 3,
         },
         '(min-width: 768px)': {
-            slidesPerView: 3,
+            slidesPerView: 4,
         },
         '(min-width: 1024px)': {
-            slidesPerView: 4,
+            slidesPerView: 3,
         },
         '(min-width: 1280px)': {
-            slidesPerView: 4,
+            slidesPerView: 4.5,
         },
     },
 }

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

@@ -2,6 +2,7 @@
     max-width: 20.8rem;
     min-height: 31.8rem;
     padding: 1.2rem 1.2rem 0 1.2rem;
+    margin: auto;
     margin-bottom: 1px;
     @apply flex flex-col justify-between;
     &.notSell {