fix the hero banner on mobile and tablet

The navbar is fixed and was on top of the hero banner, this adds enough
margin so it can be visible.

agaric/css/agaric.css

@@ -8026,6 +8026,15 @@ a.teaser {
 .media-list .teaser:hover .media-left .byline {
   display: block; }
 
+.hero {
+  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; }
 

agaric/sass/agaric/_component.hero.scss

@@ -9,6 +9,18 @@
 //
 // Styleguide: Componenet.Hero
 
+// The topbar-fixed is hidding the Hero banner.
+.hero {
+  margin-top: 52px;
+
+  @include tablet {
+    margin-top: 55px;
+  }
+  @include desktop {
+    margin-top: 95px;
+  }
+}
+
 .hero.is-light {
   background: $grey;
 }