From 1d743f2a703f078b69ed006f4a3df51f1f296577 Mon Sep 17 00:00:00 2001
From: quocsonnguyen <quocsonnguyen2010@gmail.com>
Date: Fri, 27 Aug 2021 15:43:43 +0700
Subject: [PATCH] :sparkles: feat: Home Feature

---
 .../home/HomeFeature/HomeFeature.module.scss  |  8 +--
 .../HomeFeatureItem.module.scss               | 55 ++++++++++---------
 .../HomeFeatureItem/HomeFeatureItem.tsx       |  3 +-
 3 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/src/components/modules/home/HomeFeature/HomeFeature.module.scss b/src/components/modules/home/HomeFeature/HomeFeature.module.scss
index 6a4c68be8..451dc39c5 100644
--- a/src/components/modules/home/HomeFeature/HomeFeature.module.scss
+++ b/src/components/modules/home/HomeFeature/HomeFeature.module.scss
@@ -4,11 +4,11 @@
     @apply spacing-horizontal-left grid grid-cols-1;
     background-color: #FFFFFF;
     height: fit-content;
-    display: flex;
-    margin-bottom: 3.2rem;
+    padding-top: 3.2rem;
+    padding-bottom: 3.2rem;
 
-    @screen xl {
-        @apply spacing-horizontal grid grid-cols-3;
+    @screen md {
+        @apply spacing-horizontal grid-cols-3;
         margin-bottom: 6.4rem;
     }
 }
\ No newline at end of file
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 93d876333..a31e5e4fe 100644
--- a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss
+++ b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss
@@ -5,49 +5,54 @@
     align-items: center;
     vertical-align: middle;
     height: fit-content;
+    width: fit-content;
+
+    @screen md {
+        @apply block;
+    }
+
+    @screen lg {
+        @apply flex;
+    }
 
     .itemImg {
-        @apply float-left clear-both;
-        min-width: 9.6rem;
-        max-width: 11.2rem;
+        @apply flex float-left clear-both;
         margin-right: 2.4rem;
+        align-items: center;
         &.firstImg {
-            content:url("../../assets/10h30-11h-mobile.png");
+            margin-top: 1rem;
+            content:url("../../assets/10h30-11h-desktop.png");
         }
         &.secondImg {
-            content:url("../../assets/8h-mobile.png");
+            margin-top: 1rem;
+            content:url("../../assets/8h-desktop.png");
         }
+        &.thirdImg {
+            margin-top: 1rem;
+            content:url("../../assets/green-desktop.png");
+        }
+        
         @screen md {
-            @apply float-left clear-both;
-            min-width: 9.6rem;
-            max-width: 11.2rem;
+            @apply flex justify-center items-center;
+            margin: auto;
+        }
+
+        @screen lg {
+            @apply flex float-left clear-both;
             margin-right: 2.4rem;
-            &.firstImg {
-                content:url("../../assets/10h30-11h-desktop.png");
-            }
-            &.secondImg {
-                content:url("../../assets/8h-desktop.png");
-            }
-            &.thirdImg {
-                content:url("../../assets/green-desktop.png");
-            }
         }
     }
 
     .itemText {
-        display: flex;
+        @apply inline-block;
         max-width: 28rem;
-        min-width: 28rem;
+        min-width: 12rem;
         color: #000;
         margin-right: 2.4rem;
         align-items: center;
+
         @screen md {
-            display: flex;
-            max-width: 28rem;
-            min-width: 28rem;
-            color: #000;
-            margin-right: 2.4rem;
-            align-items: center;
+            @apply flex;
         }
     }
 
diff --git a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx
index 8dd34cfa9..eb566bdc9 100644
--- a/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx
+++ b/src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx
@@ -15,8 +15,7 @@ const HomeFeatureItem = ({ image, children }: HomeFeatureItemProps) => {
             <img className={classNames(s.itemImg, {
                 [s[image]]: image,
             })}
-            alt="home feature item img" 
-            /> 
+            alt="home feature item img" /> 
             <div className={s.itemText}>{children}</div>
         </div> 
     )