From a0ed04329d1596ba685557de5a34a5474e6dd014 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Fri, 27 Aug 2021 16:25:44 +0700
Subject: [PATCH] :bug: bug: home feature

:%s
---
 pages/index.tsx                               |  8 ++--
 .../home/HomeFeature/HomeFeature.module.scss  | 20 +++++-----
 .../HomeFeatureItem.module.scss               | 37 +++++++++----------
 3 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 6d6f1a6e9..1d3072ef7 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,14 +1,14 @@
 
 import { Layout } from 'src/components/common'
-import { HomeBanner, HomeCollection, HomeCTA, HomeSubscribe, HomeVideo, HomeCategories } from 'src/components/modules/home';
-import HomeRecipe from 'src/components/modules/home/HomeRecipe/HomeRecipe';
+import { HomeBanner, HomeCollection, HomeCTA, HomeSubscribe, HomeVideo, HomeCategories, HomeFeature, HomeRecipe } from 'src/components/modules/home';
 
 export default function Home() {
   return (
     <>
       <HomeBanner />
-      <HomeCollection/>
-      <HomeCategories/>
+      <HomeFeature />
+      <HomeCategories />
+      <HomeCollection />
       <HomeVideo />
       <HomeCTA />
       <HomeRecipe />
diff --git a/src/components/modules/home/HomeFeature/HomeFeature.module.scss b/src/components/modules/home/HomeFeature/HomeFeature.module.scss
index 451dc39c5..1753edf99 100644
--- a/src/components/modules/home/HomeFeature/HomeFeature.module.scss
+++ b/src/components/modules/home/HomeFeature/HomeFeature.module.scss
@@ -1,14 +1,16 @@
-@import '../../../../../../styles/utilities';
+@import "../../../../styles/utilities";
 
 .homeFeature {
-    @apply spacing-horizontal-left grid grid-cols-1;
-    background-color: #FFFFFF;
+    @apply spacing-horizontal;
+    background-color: #ffffff;
     height: fit-content;
-    padding-top: 3.2rem;
-    padding-bottom: 3.2rem;
-
+    margin: 3.2rem auto;
     @screen md {
-        @apply spacing-horizontal grid-cols-3;
-        margin-bottom: 6.4rem;
+        @apply grid grid-cols-3;
+        grid-gap: 2.4rem;
+        margin: 6.4rem auto;
     }
-}
\ No newline at end of file
+    @screen md {
+        grid-gap: 4rem;
+    }
+}
diff --git a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss
index a31e5e4fe..d3dcb518b 100644
--- a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss
+++ b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss
@@ -1,18 +1,16 @@
-@import '../../../../../../styles/utilities';
+@import "../../../../../../styles/utilities";
 
 .homeFeatureItem {
-    @apply flex;
-    align-items: center;
-    vertical-align: middle;
-    height: fit-content;
+    @apply flex items-center;
     width: fit-content;
+    margin: auto;
 
     @screen md {
-        @apply block;
+        @apply flex flex-col items-center justify-between;
     }
 
     @screen lg {
-        @apply flex;
+        @apply flex flex-row;
     }
 
     .itemImg {
@@ -21,39 +19,38 @@
         align-items: center;
         &.firstImg {
             margin-top: 1rem;
-            content:url("../../assets/10h30-11h-desktop.png");
+            content: url("../../assets/10h30-11h-desktop.png");
         }
         &.secondImg {
             margin-top: 1rem;
-            content:url("../../assets/8h-desktop.png");
+            content: url("../../assets/8h-desktop.png");
         }
         &.thirdImg {
             margin-top: 1rem;
-            content:url("../../assets/green-desktop.png");
+            content: url("../../assets/green-desktop.png");
         }
-        
+
         @screen md {
-            @apply flex justify-center items-center;
+            @apply flex flex-col justify-center items-center;
             margin: auto;
+            margin-top: 0.8rem;
         }
 
         @screen lg {
             @apply flex float-left clear-both;
             margin-right: 2.4rem;
+            margin-top: 0;
         }
     }
 
     .itemText {
-        @apply inline-block;
         max-width: 28rem;
         min-width: 12rem;
-        color: #000;
-        margin-right: 2.4rem;
-        align-items: center;
-
         @screen md {
-            @apply flex;
+            @apply text-center;
+        }
+        @screen lg {
+            @apply text-left;
         }
     }
-
-}
\ No newline at end of file
+}