styling edit - youtube play button

vue-theme/src/components/hero.vue

@@ -10,7 +10,8 @@
         .blank.f-col(v-else)
             h3(v-if="heroText") {{ heroText }}
             img.w-max(:src="getThumbnailFromYt(showHero)" alt="hero alt image")
-            button(v-if="showPlaybutton" @click="isPlaying = true") play
+            //- button(v-if="showPlaybutton" @click="isPlaying = true") play
+            button(v-if="showPlaybutton" @click="isPlaying = true")
     .hero--image.w-max(v-else-if="heroType === 'image'")
         .hero--image--overlay.w-max.f-col
             h2.t-up.t-cntr(v-html="heroText")
@@ -107,9 +108,31 @@ export default {
     .blank
         button 
             position: absolute
-            /* height: 7vw */
-            /* width: 10vw  */
-            height: 7vw
-            width: 10vw 
-            border-radius: 1.5vw
+            height: $ms-8
+            width: $ms-8
+            background-color: rgba(170,17,0,0.4)
+            border-radius: 50%
+            border-width: 3px
+            border-color: white
+            border-style: solid
+            &:after 
+                content: ""
+                position: absolute
+                top: 20%
+                left: 30%
+                border-style: solid
+                border-width: 1.2em 0 1.2em 2.1em
+                border-color: transparent transparent transparent white
+
+        @media (min-width: $medium)     
+            button 
+                height: $ms-9
+                width: $ms-9
+                border-width: 4px
+
+                &:after 
+                    top: 18%
+                    left: 30%
+                    border-width: 1.5em 0 1.5em 2.5em
+            
 </style>