1 files changed, 70 insertions, 0 deletions
diff --git a/_sass/common/components/_hero.scss b/_sass/common/components/_hero.scss
new file mode 100644
index 0000000..81a72cc
--- /dev/null
+++ b/_sass/common/components/_hero.scss
@@ -0,0 +1,70 @@
+.hero {
+  background-position: 50% 50%;
+  @include flexbox();
+  @include flex-direction(column);
+  @include justify-content(center);
+  h1 { font-size: map-get($base, font-size-h1-xl); }
+  h2 { font-size: map-get($base, font-size-h2-xl); }
+  h3 { font-size: map-get($base, font-size-h3-xl); }
+  h4 { font-size: map-get($base, font-size-h4-xl); }
+  h5 { font-size: map-get($base, font-size-h5-xl); }
+  h6 { font-size: map-get($base, font-size-h6-xl); }
+  p  { font-size: map-get($base, font-size-xl); }
+  @include media-breakpoint-down(lg) {
+    h1 { font-size: map-get($base, font-size-h1-lg); }
+    h2 { font-size: map-get($base, font-size-h2-lg); }
+    h3 { font-size: map-get($base, font-size-h3-lg); }
+    h4 { font-size: map-get($base, font-size-h4-lg); }
+    h5 { font-size: map-get($base, font-size-h5-lg); }
+    h6 { font-size: map-get($base, font-size-h6-lg); }
+    p  { font-size: map-get($base, font-size-lg); }
+  }
+  @include media-breakpoint-down(md) {
+    h1 { font-size: map-get($base, font-size-h1-sm); }
+    h2 { font-size: map-get($base, font-size-h2-sm); }
+    h3 { font-size: map-get($base, font-size-h3-sm); }
+    h4 { font-size: map-get($base, font-size-h4-sm); }
+    h5 { font-size: map-get($base, font-size-h5-sm); }
+    h6 { font-size: map-get($base, font-size-h6-sm); }
+    p  { font-size: map-get($base, font-size); }
+  }
+  background-size: cover;
+
+}
+
+.hero--center {
+  text-align: center;
+  .menu {
+    @extend .menu--center;
+  }
+}
+
+.hero--light {
+  @extend .text--light;
+}
+
+.hero--dark {
+  @extend .text--dark;
+}
+
+.hero__content {
+  margin: map-get($spacers, 5);
+  @include media-breakpoint-down(lg) {
+    margin: map-get($spacers, 5) map-get($spacers, 4);
+  }
+  @include media-breakpoint-down(md) {
+    margin: map-get($spacers, 4) map-get($spacers, 3);
+  }
+}
+
+.heros {
+  & > .hero {
+    margin: map-get($spacers, 5);
+    @include media-breakpoint-down(lg) {
+      margin: map-get($spacers, 3);
+    }
+    @include media-breakpoint-down(md) {
+      margin: map-get($spacers, 2) 0;
+    }
+  }
+}