traxxx/assets/components/releases/movies.vue

<template>
	<div class="movies">
		<div class="content-inner">
			<div class="tiles">
				<MovieTile
					v-for="movie in movies"
					:key="`movie-${movie.id}`"
					:movie="movie"
				/>
			</div>
		</div>

		<Footer />
	</div>
</template>

<script>
import MovieTile from './movie-tile.vue';

async function mounted() {
	const { movies, totalCount } = await this.$store.dispatch('fetchMovies', {
		limit: 30,
	});

	this.movies = movies;
	this.totalCount = totalCount;
}

export default {
	components: {
		MovieTile,
	},
	data() {
		return {
			movies: [],
			totalCount: 0,
		};
	},
	mounted,
};
</script>

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

.movies {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
	grid-gap: 1rem;
	padding: 1rem;
}

@media(max-width: $breakpoint) {
	.tiles {
		grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
	}
}
</style>