From fb4458fe7d7c2085773ac66bc83ef134aac687a5 Mon Sep 17 00:00:00 2001
From: Huy Nguyen <huy.nguyen@anh.tranhuy.nguyen-9GXQ>
Date: Wed, 6 Nov 2024 16:37:32 +0700
Subject: [PATCH] update banner responsive style

---
 .../src/molecule/go1-base-banner/index.js     |  1 +
 .../src/molecule/go1-base-banner/style.css    | 32 +++++++++++--------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/packages/@coorpacademy-components/src/molecule/go1-base-banner/index.js b/packages/@coorpacademy-components/src/molecule/go1-base-banner/index.js
index 2b128cb21d..dd1bc7e700 100644
--- a/packages/@coorpacademy-components/src/molecule/go1-base-banner/index.js
+++ b/packages/@coorpacademy-components/src/molecule/go1-base-banner/index.js
@@ -36,6 +36,7 @@ const Go1BaseBanner = props => {
           />
         </div>
       </div>
+      <div className={style.imagePlaceholder} />
       <img className={style.image} src={image} />
     </div>
   );
diff --git a/packages/@coorpacademy-components/src/molecule/go1-base-banner/style.css b/packages/@coorpacademy-components/src/molecule/go1-base-banner/style.css
index 4a915ab898..9d9cc60870 100644
--- a/packages/@coorpacademy-components/src/molecule/go1-base-banner/style.css
+++ b/packages/@coorpacademy-components/src/molecule/go1-base-banner/style.css
@@ -13,12 +13,12 @@
   background: linear-gradient(312deg, rgba(221, 209, 255, 0.80) 11.39%, rgba(250, 250, 250, 0.00) 54.19%), linear-gradient(11deg, #EBF2FF 11.7%, rgba(250, 250, 250, 0.00) 106.37%), var(--background-background_primary, #FAFAFA);;
   border-radius: 16px;
   width: 100%;
-  height: 246px;
-  overflow: hidden;
+  min-height: 246px;
   display: flex;
-  flex-direction: row;
   justify-content: space-between;
   margin-top: 30px;
+  position: relative;
+  overflow: hidden;
 }
 
 .buttonWrapper {
@@ -48,20 +48,24 @@
   line-height: 20px;
   margin-bottom: 22px;
 }
+
+.imagePlaceholder {
+  height: 246px;
+  width: 471px;
+  flex-shrink: 0;
+}
+
 .image {
-  position: relative;
-  width: 427px;
-  height: auto;
-  top: 32px;
+  position: absolute;
+  width: auto;
+  height: 266px;
   right: 32px;
+  top: 32px;
 }
-@media tablet {
-  .image {
-    display: none;
-  }
-}
-@media mobile {
-  .image {
+
+@media (max-width: 1040px) {
+  .image,
+  .imagePlaceholder {
     display: none;
   }
 }
\ No newline at end of file