From 30db7e94d688c1b7e6c5816b085b034627a7b5bd Mon Sep 17 00:00:00 2001
From: David Valdez <david@agaric.com>
Date: Mon, 13 May 2019 12:55:01 -0500
Subject: [PATCH] fix the hero banner on mobile and tablet

---
 agaric/css/agaric.css                   | 8 +++++++-
 agaric/sass/agaric/_component.hero.scss | 9 ++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/agaric/css/agaric.css b/agaric/css/agaric.css
index 999d3dd..0856d54 100644
--- a/agaric/css/agaric.css
+++ b/agaric/css/agaric.css
@@ -8027,7 +8027,13 @@ a.teaser {
   display: block; }
 
 .hero {
-  margin-top: 96px; }
+  margin-top: 52px; }
+  @media screen and (min-width: 769px), print {
+    .hero {
+      margin-top: 55px; } }
+  @media screen and (min-width: 1024px) {
+    .hero {
+      margin-top: 95px; } }
 
 .hero.is-light {
   background: #E4E5E7; }
diff --git a/agaric/sass/agaric/_component.hero.scss b/agaric/sass/agaric/_component.hero.scss
index cab5417..8d4456d 100644
--- a/agaric/sass/agaric/_component.hero.scss
+++ b/agaric/sass/agaric/_component.hero.scss
@@ -11,7 +11,14 @@
 
 // The topbar-fixed is hidding the Hero banner.
 .hero {
-  margin-top: 96px;
+  margin-top: 52px;
+
+  @include tablet {
+    margin-top: 55px;
+  }
+  @include desktop {
+    margin-top: 95px;
+  }
 }
 
 .hero.is-light {