Using scroll component for release banner, adding expand button.

assets/components/releases/banner.vue

@@ -1,8 +1,5 @@
 <template>
-	<div
-		class="banner"
-		@wheel.prevent="scrollBanner"
-	>
+	<div class="banner">
 		<div class="trailer">
 			<video
 				v-if="release.trailer"
@@ -110,10 +107,6 @@ function photos() {
 	return this.release.photos;
 }
 
-function scrollBanner(event) {
-	event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
-}
-
 export default {
 	props: {
 		release: {
@@ -131,9 +124,6 @@ export default {
 		photos,
 		sfw,
 	},
-	methods: {
-		scrollBanner,
-	},
 };
 </script>
 
@@ -141,14 +131,20 @@ export default {
 @import 'theme';
 
 .banner {
-    background: var(--empty);
+    background: var(--background-dim);
     flex-shrink: 0;
     white-space: nowrap;
     overflow-x: auto;
     scrollbar-width: none;
-    box-shadow: 0 0 3px var(--shadow);
+	scroll-behavior: smooth;
     font-size: 0;
 
+	&.expanded {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+	}
+
     &::-webkit-scrollbar {
         display: none;
     }
@@ -187,6 +183,8 @@ export default {
     display: inline-flex;
     align-items: center;
     justify-content: center;
+	margin: .5rem;
+	box-shadow: 0 0 3px var(--shadow-weak);
 
     .warning {
         display: none;