hero youtube container embed styling

vue-theme/src/components/hero.vue

@@ -79,9 +79,10 @@ export default {
 
 <style lang="postcss">
 @import './../sss/theme.sss'
+@import './../sss/variables.sss'
 
 .hero
-    /* background-color: rebeccapurple */
+    background-color: rebeccapurple
     min-height: 35%
     width: 100%
     &--image
@@ -96,15 +97,35 @@ export default {
             width: 100%
             h2 
                 /* need better responsive solution for heading size  */
-                font-size: 1.5vh
+                /* font-size: 1.5vh */
                 color: $cia_white
                 text-shadow: 1px 1px $cia_black
                 max-width: 70vw
+    &--video
+        width: 100vw
+        height: 100%
+
     .embedded
         height: 100%
         width: 100%
+    .blank
+        img 
+            width: 100vw
+            
+        button 
+            position: absolute
+            /* height: 7vw */
+            /* width: 10vw  */
+            height: 7vw
+            width: 10vw 
+            border-radius: 1.5vw
 
 /* min-width settings */
 /* dynamic scaling for heading size scaling */
+// Medium devices (tablets, 768px and up)
+@media (min-width: $medium)
+.hero
+    background-color: pink
+    &--video
 
 </style>