<template> <ul class="gallery-featured"> <li v-for="(gallery, index) in galleries" class="featured-image thumb-overlay" :style="{ 'background-image': 'url(' + gallery.featuredImage + ')' }" :key="index" @click="$emit('clicked', index)"> <span class="gallery-title">{{ gallery.title }}</span> </li> </ul> </template> <script> export default { props: { galleries: { type: Array, required: true }, }, } </script> <style lang="scss" scoped> .featured-image { width: 100%; background-size: cover; background-position: center center; overflow: hidden; } @media (max-width: $bp__layout) { .featured-image { height: calc(50vh - #{$site-menu__header-height / 2}); width: 100vw; flex: 0 0 100vw; } .gallery-title { position: absolute; display: block; max-width: 66%; font-size: 1.5em; padding: .5em 1em .5em 1em; margin: 1rem 0 0 0; color: #fff; } } @media (min-width: $bp__layout) { .gallery-featured { transition: opacity .3s; // TEMP padding: 8px; } .featured-image { z-index: 10; position: relative; height: 0; padding-top: 100%; margin-bottom: 4px; } .gallery-title { z-index: 15; position: absolute; top: 8px; right: 8px; text-align: right; font-size: 1em; @include font-title(); color: $color__neutral-900; @media (min-width: $bp__gallery-compact) { font-size: 1.3em; } } } </style>