:art: tweaks to mobile menu pos | fixing z-index for tint | justifying embed top

vue-theme/src/components/hero.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 .hero.w-max.f-col(v-if="showHero")
-    .tint
+    .tint.z-top.w-max
     .hero--video.w-max(v-if="heroType === 'video'")
         iframe(
             v-if="isPlaying"
@@ -91,10 +91,10 @@ export default {
     min-height: 25vh
     position: relative
     overflow: hidden
+    justify-content: flex-start
     .tint
         position: absolute
         height: 100%
-        width: 100%
         background-color: #00000055
 
     &--image

vue-theme/src/components/navigation/navigation.vue

@@ -101,7 +101,7 @@ nav.main
         display: none
         h1
             /* font-size: $ms-3  */
-            margin: $ms--5 0  $ms--7
+            margin: $ms--5 0 $ms--7
             /* padding-top: $ms--7 */
         h5  
             font-size: $ms--1
@@ -134,16 +134,14 @@ nav.main
                 cursor: pointer
                 &:checked + ul
                     display: block 
-                    clear: both 
                     position: absolute
-                    right: $ms-0
-                    width: fit-content
+                    width: 100%
         ul
             /* background-color: $primary-dark */
             background-color: $cia_grey
             display: none
             padding: $ms--1 $ms-4 0 $ms--3
-            margin: $ms-0 0 0 0
+            margin: 1px 0 0 0
             box-shadow: lightgrey $ms--7 $ms--7 $ms--7
             li  
                 /* color: $primary-light */