Add customisation variables

sass/layout/hero.sass

@@ -1,53 +1,7 @@
-// Components
-
-.hero-video
-  +overlay
-  overflow: hidden
-  video
-    left: 50%
-    min-height: 100%
-    min-width: 100%
-    position: absolute
-    top: 50%
-    transform: translate3d(-50%, -50%, 0)
-  // Modifiers
-  &.is-transparent
-    opacity: 0.3
-  // Responsiveness
-  +mobile
-    display: none
-
-.hero-buttons
-  margin-top: 1.5rem
-  // Responsiveness
-  +mobile
-    .button
-      display: flex
-      &:not(:last-child)
-        margin-bottom: 0.75rem
-  +tablet
-    display: flex
-    justify-content: center
-    .button:not(:last-child)
-      margin-right: 1.5rem
-
-// Containers
-
-.hero-head,
-.hero-foot
-  flex-grow: 0
-  flex-shrink: 0
-
-.hero-body
-  flex-grow: 1
-  flex-shrink: 0
-  padding: 3rem 1.5rem
-
 // Main container
 
 .hero
   align-items: stretch
-  background-color: $white
   display: flex
   flex-direction: column
   justify-content: space-between
@@ -150,3 +104,48 @@
     min-height: 50vh
   &.is-fullheight
     min-height: 100vh
+
+// Components
+
+.hero-video
+  +overlay
+  overflow: hidden
+  video
+    left: 50%
+    min-height: 100%
+    min-width: 100%
+    position: absolute
+    top: 50%
+    transform: translate3d(-50%, -50%, 0)
+  // Modifiers
+  &.is-transparent
+    opacity: 0.3
+  // Responsiveness
+  +mobile
+    display: none
+
+.hero-buttons
+  margin-top: 1.5rem
+  // Responsiveness
+  +mobile
+    .button
+      display: flex
+      &:not(:last-child)
+        margin-bottom: 0.75rem
+  +tablet
+    display: flex
+    justify-content: center
+    .button:not(:last-child)
+      margin-right: 1.5rem
+
+// Containers
+
+.hero-head,
+.hero-foot
+  flex-grow: 0
+  flex-shrink: 0
+
+.hero-body
+  flex-grow: 1
+  flex-shrink: 0
+  padding: 3rem 1.5rem