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

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

  data () {
    return {
    }
  },

  methods: {
  }
}
</script>

<style lang="scss" scoped>

@media (max-width: $bp__layout) {
  .featured-image {
    height: 50vh;
    width: 100vw;
    flex: 0 0 100vw;
  }
}

@media (min-width: $bp__layout) {
  $featured-width: 20rem;
  $featured-height: 16rem;

  .featured-images {
    order: 2;
    flex: 0 0 $featured-width;
    overflow-y: auto;
  }

  .featured-image {
    width: 100%;
    height: $featured-height;;
  }
}

</style>
