Improved appearence of empty scene media banner.

assets/components/releases/banner.vue

@@ -1,4 +1,5 @@
 <template>
+	<div class="media-container">
 		<div
 			class="media"
 			:class="{ center: release.photos.length < 2 }"
@@ -105,6 +106,7 @@
 				</a>
 			</div>
 		</div>
+	</div>
 </template>
 
 <script>
@@ -163,6 +165,10 @@ export default {
 <style lang="scss" scoped>
 @import 'breakpoints';
 
+.media-container {
+	backdrop-filter: blur(1rem);
+}
+
 .media {
     flex-shrink: 0;
     white-space: nowrap;
@@ -171,6 +177,7 @@ export default {
 
 .media.center {
 	width: 1200px;
+	max-width: 100%;
 	margin: 0 auto;
 }
 

assets/components/releases/release.vue

@@ -5,7 +5,8 @@
 	>
 		<Scroll
 			v-slot="slotProps"
-			class="scroll-light"
+			class="scroll-light banner"
+			:style="{ 'background-image': `url(/media/${release.poster.thumbnail})` }"
 			:expandable="false"
 		>
 			<Banner
@@ -259,6 +260,11 @@ export default {
 	border-bottom: solid 1px var(--shadow-hint);
 }
 
+.banner {
+	background-position: center;
+	background-size: cover;
+}
+
 .info {
     padding: 1rem;
     border-left: solid 1px var(--shadow-hint);

assets/components/scroll/scroll.vue

@@ -24,7 +24,7 @@
 
 			<div
 				ref="content"
-				class="content"
+				class="scroll-content"
 			>
 				<slot :loaded="loaded" />
 			</div>
@@ -145,7 +145,7 @@ export default {
 	position: relative;
 }
 
-.content {
+.scroll-content {
 	overflow-x: scroll;
 	scroll-behavior: smooth;
 	scrollbar-width: none;