From 017eacb29a8115ce957f472c63aba283d3bbe03b Mon Sep 17 00:00:00 2001
From: Sean Ho <seanho96@yahoo.com>
Date: Fri, 1 Oct 2021 13:31:04 +0800
Subject: [PATCH 1/3] fix: missing margin on market news section on mobile

---
 src/pages/academy/components/_markets-news.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/academy/components/_markets-news.js b/src/pages/academy/components/_markets-news.js
index 0b6ea592de6..da45ee112b3 100644
--- a/src/pages/academy/components/_markets-news.js
+++ b/src/pages/academy/components/_markets-news.js
@@ -23,7 +23,7 @@ const MarketsNewsWrapper = styled.div`
     @media ${device.tablet} {
         grid-template-columns: auto;
         margin: 0 auto;
-        max-height: auto;
+        max-height: unset;
         padding: 0;
     }
 `

From ec33b5e386affecead1ab00313d3180ecadd6730 Mon Sep 17 00:00:00 2001
From: Sean Ho <seanho96@yahoo.com>
Date: Fri, 1 Oct 2021 14:00:18 +0800
Subject: [PATCH 2/3] fix: first card border radius

---
 src/pages/academy/blog/_first-article.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/academy/blog/_first-article.js b/src/pages/academy/blog/_first-article.js
index cb99e1d6268..a8dd669950f 100644
--- a/src/pages/academy/blog/_first-article.js
+++ b/src/pages/academy/blog/_first-article.js
@@ -60,7 +60,7 @@ const FirstArticle = ({ item }) => {
     return (
         <RedirectLink to={`/academy/blog/posts/${item.slug}/`}>
             <StyledFlex jc="flex-start" mt="96px">
-                <StandardImgWrapper width="592px" br="6px">
+                <StandardImgWrapper width="592px" br="6px 0 0 6px" tabletL_br="6px 6px 0 0">
                     <QueryImage
                         data={getImage(item.main_image.imageFile)}
                         alt={item.main_image.description || ''}

From fa875432ca8ef18ffe3f59fba59fd157dbdf54aa Mon Sep 17 00:00:00 2001
From: Sean Ho <seanho96@yahoo.com>
Date: Fri, 1 Oct 2021 14:45:29 +0800
Subject: [PATCH 3/3] fix: design discrepencies

---
 src/pages/academy/blog/posts/_style.js                    | 7 ++++---
 src/pages/academy/components/_side-subscription-banner.js | 2 +-
 src/templates/article.js                                  | 4 ++--
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/pages/academy/blog/posts/_style.js b/src/pages/academy/blog/posts/_style.js
index db807db028a..626bdc07cfa 100644
--- a/src/pages/academy/blog/posts/_style.js
+++ b/src/pages/academy/blog/posts/_style.js
@@ -14,7 +14,7 @@ export const Background = styled.div`
 `
 export const HeroContainer = styled(Container)`
     height: auto;
-    min-height: 566px;
+    min-height: 525px;
     padding: 76px 0 40px;
     align-items: flex-start;
 
@@ -371,15 +371,16 @@ export const RightSocialComponents = styled.div`
     width: auto;
 `
 export const DesktopWrapper = styled(Flex)`
-    @media ${device.tabletS} {
+    @media ${device.laptop} {
         display: none;
     }
 `
 export const MobileWrapper = styled.div`
     display: none;
 
-    @media ${device.tabletS} {
+    @media ${device.laptop} {
         display: flex;
+        justify-content: center;
         width: 100%;
     }
 `
diff --git a/src/pages/academy/components/_side-subscription-banner.js b/src/pages/academy/components/_side-subscription-banner.js
index ba83597677b..6df4b0e9097 100644
--- a/src/pages/academy/components/_side-subscription-banner.js
+++ b/src/pages/academy/components/_side-subscription-banner.js
@@ -18,7 +18,7 @@ const SubscribeBannerWrapper = styled(Flex)`
     background: var(--color-grey-42);
     border-radius: 8px;
     margin: 40px 0;
-    @media ${device.tabletL} {
+    @media ${device.laptop} {
         max-width: 328px;
         padding: 32px 18.5px;
     }
diff --git a/src/templates/article.js b/src/templates/article.js
index 030ee2eb473..bbfa9eda28d 100644
--- a/src/templates/article.js
+++ b/src/templates/article.js
@@ -271,11 +271,11 @@ const ArticlesTemplate = (props) => {
                                     </SocialComponentsWrapper>
 
                                     {side_banner_data_details && (
-                                        <Show.Mobile>
+                                        <MobileWrapper>
                                             <Flex mt="24px">
                                                 <Banner detailsObj={side_banner_data_details} />
                                             </Flex>
-                                        </Show.Mobile>
+                                        </MobileWrapper>
                                     )}
                                     <MobileWrapper>
                                         <ArticleEmailBanner />