From 731f5ec92be46fd2117b80d57a258933e291b2bb Mon Sep 17 00:00:00 2001
From: Yuliya Sharapa <yuliya.sharapa@bitlogic.io>
Date: Thu, 21 Apr 2022 17:21:38 -0300
Subject: [PATCH] fix expanded grid

---
 src/components/expandGrid/ExpandGrid.js   |  2 +-
 src/components/expandGrid/expandGrid.scss | 19 ++++++++++++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/expandGrid/ExpandGrid.js b/src/components/expandGrid/ExpandGrid.js
index 7a11e285..02a05db5 100644
--- a/src/components/expandGrid/ExpandGrid.js
+++ b/src/components/expandGrid/ExpandGrid.js
@@ -29,7 +29,7 @@ const ExpandGrid = ({ data }) => {
         <section className="expandGrid">
           <div className="expandGrid-body">
             <h2>{data.title}</h2>
-            <h6 className="px-5">{data.subtitle}</h6>
+            <h6 className="px-md-3">{data.subtitle}</h6>
             <AnimatedList items={data.items.slice(0, 4)} />
           </div>
         </section>
diff --git a/src/components/expandGrid/expandGrid.scss b/src/components/expandGrid/expandGrid.scss
index 046c4558..d0741bae 100644
--- a/src/components/expandGrid/expandGrid.scss
+++ b/src/components/expandGrid/expandGrid.scss
@@ -13,21 +13,31 @@
   }
   h2 {
     flex-grow: 1;
-    text-align: center;
     font-weight: 700;
+    text-transform: uppercase;
+    @media screen and (min-width: $breakpoint-md) {
+      text-align: center;
+    }
   }
   h6 {
-    text-align: center;
-    line-height: 30px;
     font-weight: 400;
+    margin-bottom: 10px;
+    @media screen and (min-width: $breakpoint-md) {
+      text-align: center;
+      line-height: 28px;
+      margin-bottom: 50px;
+    }
   }
 }
 
 .staggered-list-content {
-  margin-top: 3em;
+  margin-top: 2em;
   width: 100%;
   display: flex;
   justify-content: center;
+  @media screen and (min-width: $breakpoint-md) {
+    margin-top: 3em;
+  }
 }
 
 .list {
@@ -35,7 +45,6 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  padding: 0 2em;
   width: 100%;
 }