From 9c3183b052df05f394f804a09eecf423d3ea2c80 Mon Sep 17 00:00:00 2001
From: Clark McAdoo <jmcadoo@newrelic.com>
Date: Fri, 7 Jan 2022 10:59:02 -0600
Subject: [PATCH] fix: WIP - update banner styles for I/O mobile

---
 src/components/IOBanner.js | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)
diff --git a/src/components/IOBanner.js b/src/components/IOBanner.js
index 30762471e..d0a6ec7f0 100644
--- a/src/components/IOBanner.js
+++ b/src/components/IOBanner.js
@@ -25,6 +25,10 @@ const BannerHeaderContent = () => (
     <h2
       css={css`
         color: var(--color-brand-300);
+
+        @media (max-width: ${MOBILE_BREAKPOINT}) {
+          font-weight: 400;
+        }
       `}
     >
       Instant Observability
@@ -32,18 +36,27 @@ const BannerHeaderContent = () => (
     <h1
       css={css`
         color: var(--color-neutrals-050);
+
+        @media (max-width: ${MOBILE_BREAKPOINT}) {
+          font-weight: 400;
+        }
       `}
     >
       Dashboards, alerts, and integrations all in one place
     </h1>
     <body
       css={css`
-        color: var(--color-neutrals-050);
         background: none;
+        color: var(--color-brand-300);
+
+        @media (max-width: ${MOBILE_BREAKPOINT}) {
+          font-size: 12px;
+          font-weight: 300;
+        }
       `}
     >
-      Our quickstarts bundle everything you need to start monitoring like a pro
-      right out of the box.
+      Our quickstarts bundles get you monitoring like a pro right out of the
+      box.
     </body>
   </div>
 );
