update: responsive featured images

assets/scss/_globals.scss

@@ -7,7 +7,7 @@ $bp__m: 40em;
 $bp__layout: 40em;
 
 // gallery ui becomes more compact
-$bp__gallery-compact: 60em;
+$bp__gallery-compact: 75em;
 
 $z-index__page: 50;
 $z-index__page-overlay: 75;
@@ -16,3 +16,6 @@ $z-index__menu: 100;
 $site-menu__width: 25rem;
 $site-menu__header-width: 3rem;
 $site-menu__header-height: 3rem;
+
+$gallery-featured-width: 20rem;
+$gallery-featured-width--compact: 12rem;

components/GalleryFeatured.vue

@@ -2,8 +2,7 @@
   <ul class="gallery-featured">
     <li v-for="(gallery, index) in galleries"
         class="featured-image"
-        :style="{ 'height': featuredHeight,
-                  'background-image': 'url(' + gallery.featuredImage + ')' }"
+        :style="{ 'background-image': 'url(' + gallery.featuredImage + ')' }"
         :key="index"
         @click="$emit('clicked', index)">
       <span class="gallery-title">{{ gallery.title }}</span>
@@ -18,28 +17,15 @@ export default {
       type: Array,
       required: true
     },
-    featuredHeight: {
-      type: String,
-      required: true
-    }
   },
-
-  data () {
-    return {
-    }
-  },
-
-  computed: {
-  },
-
-  methods: {
-  }
 }
 </script>
 
 <style lang="scss" scoped>
 .featured-image {
+  height: 0;
   width: 100%;
+  padding-top: 100%;
   background-size: cover;
   background-position: center center;
   overflow: hidden;
@@ -47,7 +33,7 @@ export default {
 
 @media (max-width: $bp__layout) {
   .featured-image {
-    height: calc(50vh - #{$site-menu__header-height / 2}) !important; // must override inline style set with prop
+    height: calc(50vh - #{$site-menu__header-height / 2});
     width: 100vw;
     flex: 0 0 100vw;
   }
@@ -75,11 +61,6 @@ export default {
   .gallery-featured {
     transition: opacity .3s; // TEMP
     padding: 8px;
-    /* opacity: .3; */
-    /*  */
-    /* &:hover { */
-    /*   opacity: 1; */
-    /* } */
   }
 }
 

components/GalleryImageViewer.vue

@@ -195,9 +195,13 @@ export default {
     position: absolute;
     top: 8px;
     left: calc(3rem + 8px);
-    right: 20rem;
+    right: $gallery-featured-width--compact;
     bottom: 8px;
     background-position: top center;
+
+    @media (min-width: $bp__gallery-compact) {
+      right: $gallery-featured-width;
+    }
   }
 
   .viewer-background {

components/GalleryPage.vue

@@ -10,7 +10,6 @@
                         @close="imageViewerIsVisible = false" />
     <div class="gallery">
       <GalleryFeatured class="gallery__featured"
-                       :featured-height="featuredImageHeight"
                        :galleries="galleries"
                        @clicked="handleFeaturedClick" />
       <GalleryThumbs class="gallery__thumbs"
@@ -145,8 +144,12 @@ export default {
 
     .gallery__featured {
       order: 2;
-      flex: 0 0 20rem;
+      flex: 0 0 $gallery-featured-width--compact;
       overflow-y: auto;
+
+      @media (min-width: $bp__gallery-compact) {
+        flex-basis: $gallery-featured-width;
+      }
     }
 
     .gallery__thumbs {