fix mobile issues

Author: a-hariti

src/components/banner/banner.module.scss

@@ -1,6 +1,7 @@
 .promo-banner {
+  font-size: 15px;
   background: var(--accent-yellow);
-  padding: 0.5rem;
+  padding: 0.5rem 1rem;
   display: flex;
   justify-content: center;
   position: relative;
@@ -38,10 +39,10 @@
 
 .promo-banner-dismiss {
   background: var(--flame6);
-  height: 3rem;
-  width: 3rem;
+  height: 1.5rem;
+  width: 1.5rem;
+  font-size: 1rem;
   line-height: 100%;
-  font-size: 2.5rem;
   border-radius: 3rem;
   text-align: center;
   position: absolute;
@@ -54,9 +55,8 @@
     text-decoration: none;
   }
 
-  @media (min-width: 576px) {
-    height: 1.5rem;
-    width: 1.5rem;
-    font-size: 1rem;
+  @media (max-width: 576px) {
+    top: 1.5rem;
+    right: 1rem;
   }
 }

src/components/banner/index.tsx

@@ -151,7 +151,7 @@ export function Banner() {
   return banner ? (
     <div className={[styles['promo-banner']].filter(Boolean).join(' ')}>
       <div className={styles['promo-banner-message']}>
-        <span className="flex gap-4">
+        <span className="flex flex-col md:flex-row gap-4">
           {banner.text}
           <a href={banner.linkURL} className="min-w-max">
             {banner.linkText}