🎨 styles: home categories bg

:%s

src/components/modules/home/HomeCategories/HomeCategories.module.scss

@@ -1,8 +1,41 @@
 @import "../../../../styles/_utilities";
 .homeCategoriesWrapper {
-    @apply flex flex-col items-center justify-center spacing-horizontal;
+    @apply flex flex-col items-center justify-center;
+    margin-bottom: 3rem;
+
+    .inner {
+        @apply relative spacing-horizontal;
+
+        padding-top: 1.6rem;
+        padding-bottom: 1.6rem;
+        z-index: 10;
         @screen md {
-        background-color: var(--background);
+            @apply bg-gray;
+        }
+    }
+    @screen md {
+        @apply relative;
+        margin-bottom: 5.6rem;
+
+        &::before,
+        &::after {
+            @apply absolute bg-primary w-full;
+            content: "";
+            height: 6rem;
+            z-index: 0;
+            background-repeat: no-repeat;
+            background-size: 115%;
+        }
+        &::before {
+            top: -4rem;
+            background-image: url("./img/bg_top.svg");
+            background-position: top center;
+        }
+        &::after {
+            bottom: -4rem;
+            background-image: url("./img/bg_bottom.svg");
+            background-position: bottom center;
+        }
     }
     .homeCategoryList {
         @apply flex justify-start items-center flex-wrap;

src/components/modules/home/HomeCategories/HomeCategories.tsx

@@ -46,9 +46,8 @@ const categories = [
 const HomeCategories = () => {
     return (
         <div className={classNames(s.homeCategoriesWrapper)}>
-            <div className={classNames(s.homeCategoriesHeading)}>
-                <HeadingCommon align='center' children="CATEGORIES"></HeadingCommon>
-            </div>
+            <div className={s.inner}>
+                <HeadingCommon align='center'>CATEGORIES</HeadingCommon>
 
                 <div className={classNames(s.homeCategoryList)}>
                     {categories?.map(item => (
@@ -62,6 +61,7 @@ const HomeCategories = () => {
                     ))}
                 </div>
             </div>
+        </div>
     )
 }