Added movie tile. Fixed actor header. Larger breakpoint for nav menu.

assets/components/movies/movies.vue

@@ -1,11 +1,48 @@
 <template>
 	<div class="movies">
-		<h1 class="heading">Movies</h1>
+		<div class="tiles">
+			<Movie
+				v-for="movie in movies"
+				:key="`movie-${movie.id}`"
+				:movie="movie"
+			/>
+		</div>
 	</div>
 </template>
 
+<script>
+import Movie from './tile.vue';
+
+async function mounted() {
+	const { movies, totalCount } = await this.$store.dispatch('fetchMovies', {
+		limit: 30,
+	});
+
+	this.movies = movies;
+	this.totalCount = totalCount;
+}
+
+export default {
+	components: {
+		Movie,
+	},
+	data() {
+		return {
+			movies: [],
+			totalCount: 0,
+		};
+	},
+	mounted,
+};
+</script>
+
 <style lang="scss">
 .movies {
     padding: 1rem;
 }
+
+.tiles {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, 12rem);
+}
 </style>

assets/components/movies/tile.vue

@@ -0,0 +1,38 @@
+<template>
+	<div class="tile">
+		<div class="details">{{ movie.entity.name }}</div>
+		<h3 class="title">{{ movie.title }}</h3>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		movie: {
+			type: Object,
+			default: null,
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.tile {
+	background: var(--background);
+	box-shadow: 0 0 3px var(--darken);
+}
+
+.details {
+	color: var(--text-light);
+	background: var(--profile);
+	padding: .5rem 1rem;
+    font-size: .8rem;
+	font-weight: bold;
+}
+
+.title {
+	padding: 1rem;
+	margin: 0;
+	font-size: 1rem;
+}
+</style>