marc-leopold/components/GalleryFeatured.vue

<template>
  <ul>
    <li v-for="(gallery, index) in galleries"
        class="featured-image"
        :style="{ 'height': featuredHeight }"
        :key="index">
      <span>{{ gallery.title }}</span>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    galleries: {
      type: Array,
      required: true
    },
    featuredHeight: {
      type: String,
      required: true
    }
  },

  data () {
    return {
    }
  },

  methods: {
  }
}
</script>

<style lang="scss" scoped>
@media (max-width: $bp__layout) {
  .featured-image {
    height: 50vh !important; // must override inline style set with prop
    width: 100vw;
    flex: 0 0 100vw;
  }
}

@media (min-width: $bp__layout) {
  .featured-image {
    width: 100%;
  }
}

</style>