styline - overlay heading layout behaviour

vue-theme/src/components/hero.vue

     .hero--image(v-else)
         .hero--image--overlay.f-col
             div(v-html="heroText")
+    //- if not hero image then heading overlay to show only in main article
 
 </template>
 
         &--overlay
             color: $cia_white
             position: absolute
-            top: 30%
+            /* top: 30% */
+            margin: 20% 0
             width: 100%
             h2 
+                /* need better responsive solution for heading size  */
+                font-size: 1.5vh
                 color: $cia_white
                 text-shadow: 1px 1px $cia_black
-                max-width: 80vh
+                max-width: 70vw
     .embedded
         height: 100%
         width: 100%
+
+/* min-width settings */
+/* dynamic scaling for heading size scaling */
+
 </style>