styling edit - added tint class for hero image

vue-theme/src/components/hero.vue

@@ -1,5 +1,6 @@
 <template lang="pug">
 .hero.w-max.f-col(v-if="showHero")
+    .tint
     .hero--video.w-max(v-if="heroType === 'video'")
         iframe(
             v-if="isPlaying"
@@ -85,20 +86,28 @@ export default {
 @import './../sss/variables.sss'
 
 .hero
-    background-color: rebeccapurple
+    /* background-color: rebeccapurple */
     min-height: 35%
+    height: 78vh
+    position: relative
+    overflow: hidden
+    .tint
+        position: absolute
+        height: 100%
+        width: 100%
+        background-color: #00000055
+
     &--image
         &--overlay
-            color: $cia_white
+            /* color: $cia_white */
             position: absolute
-            margin: 20% 0
+            margin: 19% 0
             h2 
                 /* need better responsive solution for heading size  */
-                font-size: 5vw
+                font-size: 3vw
                 color: $cia_white
                 text-shadow: 1px 1px $cia_black
                 max-width: 70vw
-                margin: -25vh 0 0
     &--video
         width: 100vw
         height: 100%
@@ -108,6 +117,12 @@ export default {
         height: 100%
         
     .blank
+        position: absolute
+        height: inherit
+        width: inherit 
+        img 
+            position: 
+
         button 
             position: absolute
             min-height: $ms-7