diff --git a/sass/_article-list.scss b/sass/_article-list.scss
index 05bc0ea..bc09d33 100644
--- a/sass/_article-list.scss
+++ b/sass/_article-list.scss
@@ -4,20 +4,19 @@
 	gap: 1rem;
 	margin-block-start: 2rem;
 
-	.article-wrapper {
-		transition: var(--transition);
-
-		&:active {
-			transform: var(--active);
-		}
-	}
-
 	article {
 		position: relative;
+		transition: var(--transition);
 		box-shadow: var(--edge-highlight), var(--shadow-glass);
 		border-radius: var(--rounded-corner);
 		border-start-end-radius: 2.125rem;
 		border-end-end-radius: 1.8125rem;
+		background-image:
+			linear-gradient(var(--accent-color-alpha), var(--accent-color-alpha)),
+			linear-gradient(var(--nav-bg), var(--nav-bg)),
+			var(--blurnail);
+		background-position: center;
+		background-size: cover;
 		background-color: var(--accent-color-alpha);
 		padding: 1rem;
 		overflow: hidden;
@@ -31,13 +30,13 @@
 					transform: scaleX(-1);
 				}
 			}
-
-			.blurnail {
-				transform: scale(1.25);
-			}
 		}
 
-		& > a {
+		&:active {
+			transform: var(--active);
+		}
+
+		&>a {
 			position: absolute;
 			inset: 0;
 			border-radius: var(--rounded-corner);
@@ -46,6 +45,7 @@
 		}
 
 		h3 {
+			mix-blend-mode: invert;
 			margin: 0;
 			color: var(--accent-color);
 			font-weight: bold;
@@ -59,13 +59,13 @@
 				position: relative;
 				transform: translateX(-0.25rem);
 				opacity: 0;
-				z-index: -1;
 				mask-image: var(--icon);
 				transition: var(--transition);
 				margin-inline-start: 0.25rem;
 				background-color: currentColor;
 				width: 1rem;
 				height: 1rem;
+				pointer-events: none;
 				content: "";
 
 				:root[dir*="rtl"] & {
@@ -100,7 +100,6 @@
 				position: absolute;
 				transform: translateY(-50%);
 				opacity: var(--disabled-opacity);
-				z-index: -1;
 				mask-size: cover;
 				transition: var(--transition-longer);
 				inset-block-start: 50%;
@@ -137,6 +136,16 @@
 				color: var(--fg-muted-4);
 			}
 
+			.badge {
+				background-color: var(--fg-muted-1);
+				color: var(--fg-muted-5);
+
+				.icon {
+					-webkit-mask-image: var(--icon);
+					mask-image: var(--icon);
+				}
+			}
+
 			.tags a {
 				background-color: var(--fg-muted-1);
 				color: var(--fg-muted-5);
@@ -167,6 +176,16 @@
 				color: var(--purple-fg);
 			}
 
+			.badge {
+				background-color: var(--purple-bg);
+				color: var(--purple-fg);
+
+				.icon {
+					-webkit-mask-image: var(--icon);
+					mask-image: var(--icon);
+				}
+			}
+
 			.tags a {
 				background-color: var(--purple-bg);
 				color: var(--purple-fg);
@@ -204,6 +223,16 @@
 				color: var(--yellow-fg);
 			}
 
+			.badge {
+				background-color: var(--yellow-bg);
+				color: var(--yellow-fg);
+
+				.icon {
+					-webkit-mask-image: var(--icon);
+					mask-image: var(--icon);
+				}
+			}
+
 			.tags a {
 				background-color: var(--yellow-bg);
 				color: var(--yellow-fg);
@@ -233,6 +262,16 @@
 				color: var(--red-fg);
 			}
 
+			.badge {
+				background-color: var(--red-bg);
+				color: var(--red-fg);
+
+				.icon {
+					-webkit-mask-image: var(--icon);
+					mask-image: var(--icon);
+				}
+			}
+
 			.tags a {
 				background-color: var(--red-bg);
 				color: var(--red-fg);
@@ -262,6 +301,16 @@
 				color: var(--brown-fg);
 			}
 
+			.badge {
+				background-color: var(--brown-bg);
+				color: var(--brown-fg);
+
+				.icon {
+					-webkit-mask-image: var(--icon);
+					mask-image: var(--icon);
+				}
+			}
+
 			.tags a {
 				background-color: var(--brown-bg);
 				color: var(--brown-fg);
@@ -273,11 +322,7 @@
 			}
 		}
 
-		.draft-badge,
-		.archive-badge,
-		.featured-badge,
-		.hot-badge,
-		.poor-badge {
+		.badge {
 			float: inline-end;
 			box-shadow: var(--edge-highlight);
 			border-radius: 999px;
@@ -294,56 +339,6 @@
 			}
 		}
 
-		.draft-badge {
-			background-color: var(--fg-muted-1);
-			color: var(--fg-muted-5);
-
-			.icon {
-				-webkit-mask-image: var(--icon);
-				mask-image: var(--icon);
-			}
-		}
-
-		.archive-badge {
-			background-color: var(--purple-bg);
-			color: var(--purple-fg);
-
-			.icon {
-				-webkit-mask-image: var(--icon);
-				mask-image: var(--icon);
-			}
-		}
-
-		.featured-badge {
-			background-color: var(--yellow-bg);
-			color: var(--yellow-fg);
-
-			.icon {
-				-webkit-mask-image: var(--icon);
-				mask-image: var(--icon);
-			}
-		}
-
-		.hot-badge {
-			background-color: var(--red-bg);
-			color: var(--red-fg);
-
-			.icon {
-				-webkit-mask-image: var(--icon);
-				mask-image: var(--icon);
-			}
-		}
-
-		.poor-badge {
-			background-color: var(--brown-bg);
-			color: var(--brown-fg);
-
-			.icon {
-				-webkit-mask-image: var(--icon);
-				mask-image: var(--icon);
-			}
-		}
-
 		.details {
 			display: flex;
 			flex-wrap: nowrap;
@@ -354,18 +349,6 @@
 			border-block-start: max(1px, 0.0625rem) solid var(--fg-muted-2);
 			padding-block-start: 0.5rem;
 		}
-
-		.blurnail {
-			position: absolute;
-			opacity: var(--dim-opacity);
-			z-index: -2;
-			filter: var(--blurnail-blur);
-			transition: var(--transition-longer);
-			inset: 0;
-			background-image: var(--blurnail);
-			background-position: center;
-			background-size: cover;
-		}
 	}
 }
 
diff --git a/static/processed_images/banner.11b1c6ec8721de53.webp b/static/processed_images/banner.11b1c6ec8721de53.webp
new file mode 100644
index 0000000..05d28ad
Binary files /dev/null and b/static/processed_images/banner.11b1c6ec8721de53.webp differ
diff --git a/static/processed_images/banner.ed0678c0bce42ad1.webp b/static/processed_images/banner.ed0678c0bce42ad1.webp
deleted file mode 100644
index b1bde2a..0000000
Binary files a/static/processed_images/banner.ed0678c0bce42ad1.webp and /dev/null differ
diff --git a/templates/partials/article_type.html b/templates/partials/article_type.html
deleted file mode 100644
index ec59b31..0000000
--- a/templates/partials/article_type.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{%- if page.draft -%}
-	class="draft"
-{%- elif page.extra.archive -%}
-	class="archive"
-{%- elif page.extra.featured -%}
-	class="featured"
-{%- elif page.extra.hot -%}
-	class="hot"
-{%- elif page.extra.poor -%}
-	class="poor"
-{%- endif -%}
diff --git a/templates/partials/articles.html b/templates/partials/articles.html
index f5e305b..53144c0 100644
--- a/templates/partials/articles.html
+++ b/templates/partials/articles.html
@@ -8,68 +8,61 @@
 
 <div id="article-list">
 	{%- for page in pages %}
-		<div class="article-wrapper">
-			<article {% include "partials/article_type.html" %}>
-				<a href="{{ page.permalink | safe }}"></a>
-				{%- if page.draft %}
-					<span class="draft-badge">
-						<i class="icon"></i>
-						{{- macros_translate::translate(key="drafted", default="Drafted", language_strings=language_strings) -}}
-					</span>
-				{%- elif page.extra.archive %}
-					<span class="archive-badge">
-						<i class="icon"></i>
-						{{- macros_translate::translate(key="archived", default="Archived", language_strings=language_strings) -}}
-					</span>
-				{%- elif page.extra.featured %}
-					<span class="featured-badge">
-						<i class="icon"></i>
-						{{- macros_translate::translate(key="featured", default="Featured", language_strings=language_strings) -}}
-					</span>
-				{%- elif page.extra.hot %}
-					<span class="hot-badge">
-						<i class="icon"></i>
-						{{- macros_translate::translate(key="hot", default="Hot", language_strings=language_strings) -}}
-					</span>
-				{%- elif page.extra.poor %}
-					<span class="poor-badge">
-						<i class="icon"></i>
-						{{- macros_translate::translate(key="poor", default="Poor", language_strings=language_strings) -}}
-					</span>
-				{%- endif %}
-				<h3>{{ page.title }}</h3>
-				{%- if page.description %}
-					{{ page.description | markdown | safe }}
-				{%- endif %}
-				{%- if page.date -%}
-					<div class="details">
-						<small>
-							<time datetime="{{ page.date | date(format='%+') }}" pubdate>
-								{{- page.date | date(format=date_format, locale=date_locale) -}}
-							</time>
-							{%- if page.authors -%}
-								<span> • {% include "partials/authors.html" -%}</span>
-							{%- endif -%}
-						</small>
-						{%- if page.taxonomies -%}
-							{%- for name, taxon in page.taxonomies %}
-								<small>
-									<ul class="tags">
-										{%-for item in taxon -%}
-											<li><a class="tag" href="{{ get_taxonomy_url(kind=name, name=item, lang=lang) }}">{{ item }}</a></li>
-										{%- endfor %}
-									</ul>
-								</small>
-							{%- endfor -%}
-						{%- endif %}
-						</small>
-					</div>
-				{%- endif -%}
-				{%- if page.extra.banner -%}
-					{%- set blurnail = resize_image(path=page.colocated_path ~ page.extra.banner, width=16, height=8, op="fill", format="webp") -%}
-					<div class="blurnail" style="--blurnail: url('{{ blurnail.url }}')"></div>
-				{%- endif -%}
-			</article>
-		</div>
+		{%- if page.draft -%}
+			{%- set article_type = "draft" -%}
+			{%- set article_string = macros_translate::translate(key="drafted", default="Drafted", language_strings=language_strings) -%}
+		{%- elif page.extra.archive -%}
+			{%- set article_type = "archive" -%}
+			{%- set article_string = macros_translate::translate(key="archived", default="Archived", language_strings=language_strings) -%}
+		{%- elif page.extra.featured -%}
+			{%- set article_type = "featured" -%}
+			{%- set article_string = macros_translate::translate(key="featured", default="Featured", language_strings=language_strings) -%}
+		{%- elif page.extra.hot -%}
+			{%- set article_type = "hot" -%}
+			{%- set article_string = macros_translate::translate(key="hot", default="Hot", language_strings=language_strings) -%}
+		{%- elif page.extra.poor -%}
+			{%- set article_type = "poor" -%}
+			{%- set article_string = macros_translate::translate(key="poor", default="Poor", language_strings=language_strings) -%}
+		{%- endif -%}
+		{%- if page.extra.banner -%}
+			{%- set blurnail = resize_image(path=page.colocated_path ~ page.extra.banner, width=4, height=2, op="fill", format="webp") -%}
+		{%- endif -%}
+		<article {% if article_type %}class="{{ article_type }}"{% endif %} {% if blurnail %}style="--blurnail: url('{{ blurnail.url }}')"{% endif %}>
+			<a href="{{ page.permalink | safe }}"></a>
+			{% if article_type %}
+				<span class="badge">
+					<i class="icon"></i>
+					{{- article_string -}}
+				</span>
+			{%- endif %}
+			<h3>{{ page.title }}</h3>
+			{%- if page.description %}
+				{{ page.description | markdown | safe }}
+			{%- endif %}
+			{%- if page.date -%}
+				<div class="details">
+					<small>
+						<time datetime="{{ page.date | date(format='%+') }}" pubdate>
+							{{- page.date | date(format=date_format, locale=date_locale) -}}
+						</time>
+						{%- if page.authors -%}
+							<span> • {% include "partials/authors.html" -%}</span>
+						{%- endif -%}
+					</small>
+					{%- if page.taxonomies -%}
+						{%- for name, taxon in page.taxonomies %}
+							<small>
+								<ul class="tags">
+									{%-for item in taxon -%}
+										<li><a class="tag" href="{{ get_taxonomy_url(kind=name, name=item, lang=lang) }}">{{ item }}</a></li>
+									{%- endfor %}
+								</ul>
+							</small>
+						{%- endfor -%}
+					{%- endif %}
+					</small>
+				</div>
+			{%- endif -%}
+		</article>
 	{%- endfor %}
 </div>