traxxx/assets/components/actors/photos.vue

<template>
    <div
        class="photos"
        :class="{ wide: actor.photos.length > 2 }"
    >
        <a
            v-if="actor.avatar"
            :href="`/media/${actor.avatar.path}`"
            target="_blank"
            rel="noopener noreferrer"
            class="avatar-link photo-link"
        >
            <img
                :src="`/media/${actor.avatar.thumbnail}`"
                class="avatar photo"
            >
        </a>

        <a
            v-for="photo in actor.photos"
            :key="`photo-${photo.id}`"
            :href="`/media/${photo.path}`"
            target="_blank"
            rel="noopener noreferrer"
            class="photo-link"
        >
            <img
                :src="`/media/${photo.thumbnail}`"
                class="photo"
            >
        </a>
    </div>
</template>

<script>
export default {
    props: {
        actor: {
            type: Object,
            default: null,
        },
    },
};
</script>

<style lang="scss" scoped>
@import 'theme';

.photos {
    display: inline-grid;
    grid-template-columns: repeat(auto-fit, 12rem);
    grid-gap: .5rem;
    font-size: 0;

    .avatar-link {
        display: none;
    }
}

.photo-link {
}

.photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 0 3px $shadow-weak;
}

@media(min-width: $breakpoint3) {
    .photos.wide {
        max-width: 30vw;
    }
}

@media(max-width: $breakpoint3) {
    .photos {
        width: 100%;
        max-width: 100%;
        display: flex;
        overflow-x: scroll;
        scrollbar-width: none;

        .avatar-link {
            display: inline-block;
        }

        &::-webkit-scrollbar {
            display: none;
        }
    }

    .photo-link {
        height: 15rem;
        flex-shrink: 0;
        margin: 0 .5rem 0 0;
    }
}
</style>