Smaller tag logo on small displays. Centering tag tile lazy image to prevent load jumps. Including SASS breakpoint variable file automatically.

assets/components/album/logo.vue

@@ -56,4 +56,11 @@ module.exports = {
 	transition: transform .25s ease, opacity .25s ease;
 	filter: drop-shadow(0 0 2px var(--shadow-weak));
 }
+
+@media(max-width: $breakpoint-small) {
+	.album-logo {
+		max-height: .5rem;
+		max-width: 3.5rem;
+	}
+}
 </style>

assets/components/releases/release.vue

@@ -69,7 +69,7 @@
 			/>
 
 			<div
-				v-if="release.directors"
+				v-if="release.directors && release.directors.length > 0"
 				class="row"
 			>
 				<span class="row-label">Director</span>

assets/components/tags/tile.vue

@@ -93,8 +93,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'theme';
-
 .tile {
     box-sizing: border-box;
     position: relative;
@@ -118,6 +116,7 @@ export default {
 	height: 13.5rem;
 	object-fit: cover;
 	background-size: cover;
+	background-position: center;
     box-shadow: 0 0 3px var(--darken-weak);
 }