Added blurred backdrop to scene tile banners to compensate for lack of upscaling.

components/campaigns/campaign.vue

@@ -29,15 +29,18 @@
 		:href="campaign.url || campaign.affiliate?.url"
 		target="_blank"
 		class="campaign"
+		:style="{ background: backdrop && `url(${bannerSrc})` }"
 		data-umami-event="campaign-click"
 		:data-umami-event-campaign-id="`${campaign.entity.slug}-${campaign.id}`"
 	>
-		<img
-			:src="bannerSrc"
-			:width="campaign.banner.width"
-			:height="campaign.banner.height"
-			class="campaign-banner"
-		>
+		<div class="campaign-overlay">
+			<img
+				:src="bannerSrc"
+				:width="campaign.banner.width"
+				:height="campaign.banner.height"
+				class="campaign-banner"
+			>
+		</div>
 	</a>
 </template>
 
@@ -52,6 +55,10 @@ const props = defineProps({
 		type: Object,
 		default: null,
 	},
+	backdrop: {
+		type: Boolean,
+		default: false,
+	},
 });
 
 // console.log(props.campaign);
@@ -76,7 +83,8 @@ const bannerSrc = (() => {
 	height: 100%;
 	display: flex;
 	justify-content: center;
-	/* align-items: center; */
+	border-radius: .25rem;
+	overflow: hidden;
 }
 
 .frame {
@@ -84,11 +92,27 @@ const bannerSrc = (() => {
 	overflow: hidden;
 }
 
+.campaign-overlay {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	box-sizing: border-box;
+	padding: 4px; /* margin for drop shadow */
+	justify-content: center;
+	align-items: center;
+	backdrop-filter: blur(1rem) saturate(70%) brightness(125%);
+}
+
+.dark .campaign-overlay {
+	backdrop-filter: blur(1rem) saturate(70%) brightness(75%);
+}
+
 .campaign-banner {
 	height: auto;
 	max-height: 100%;
 	max-width: 100%;
 	object-fit: contain;
+	filter: drop-shadow(0 0 2px var(--shadow-weak-10));
 }
 
 .restricted {