:art: adjusting some widths in single template, and featured-image component

vue-theme/src/components/hero.vue

 <template lang="pug">
-.hero.f-col(v-if="showHero")
-    .hero--video(v-if="heroType === 'video'")
+.hero.w-max.f-col(v-if="showHero")
+    .hero--video.w-max(v-if="heroType === 'video'")
         iframe(
             v-if="isPlaying"
             :src="`https://www.youtube.com/embed/${heroIdFromUrl}?autoplay=1`"
             frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope"
             allowfullscreen
-        ).embedded
+        ).embedded.w-max
         .blank.f-col(v-else)
             h3(v-if="heroText") {{ heroText }}
-            img(:src="getThumbnailFromYt(showHero)" alt="hero alt image")
+            img.w-max(:src="getThumbnailFromYt(showHero)" alt="hero alt image")
             button(v-if="showPlaybutton" @click="isPlaying = true") play
-    .hero--image(v-else-if="heroType === 'image'")
-        .hero--image--overlay.f-col
+    .hero--image.w-max(v-else-if="heroType === 'image'")
+        .hero--image--overlay.w-max.f-col
             h2.t-up.t-cntr(v-html="heroText")
-        img(:src="showHero" alt="hero alt image")
+        img.w-max(:src="showHero" alt="hero alt image")
     .hero--image(v-else)
-        .hero--image--overlay.f-col
+        .hero--image--overlay.w-max.f-col
             div(v-html="heroText")
     //- if not hero image then heading overlay to show only in main article
 
 .hero
     background-color: rebeccapurple
     min-height: 35%
-    width: 100%
     &--image
-        width: 100%
-        > img
-            width: 100%
         &--overlay
             color: $cia_white
             position: absolute
             /* top: 30% */
             margin: 20% 0
-            width: 100%
             h2 
                 /* need better responsive solution for heading size  */
                 /* font-size: 1.5vh */
         height: 100%
 
     .embedded
-        height: 100%
-        width: 100%
+        min-height: 210px
     .blank
-        img 
-            width: 100vw
-            
         button 
             position: absolute
             /* height: 7vw */
             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>

vue-theme/src/pages/single.vue

 .page--single.f-col.between
     gallery(v-if="activeGalleryIndex >= 0" :activeImageIndex="activeImageIndex" :images="imagesInGallery" @close="closeGallery")
 
-    article(v-if="!post")
+    article.w-max(v-if="!post")
         header
             p loading...
-    article(v-else).f-grow.shadow
+    article(v-else).w-max.f-grow.shadow
         header
             //- breadcrumb links at top of page, needs link routing
             breadcrumb.f-row.start.t-up