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) => {
+ alt="home feature item img" />