Scale article cards down when pressed

sass/_article-list.scss

@@ -4,9 +4,16 @@
 	gap: 1rem;
 	margin-block-start: 2rem;
 
+	.article-wrapper {
+		transition: var(--transition);
+
+		&:active {
+			transform: var(--active);
+		}
+	}
+
 	article {
 		position: relative;
-		transition: var(--transition-longer);
 		box-shadow: var(--edge-highlight), var(--shadow-glass);
 		border-radius: var(--rounded-corner);
 		border-start-end-radius: 2.125rem;
@@ -39,7 +46,6 @@
 		}
 
 		h3 {
-			display: inline-block;
 			margin: 0;
 			color: var(--accent-color);
 			font-weight: bold;
@@ -50,9 +56,10 @@
 				--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m5.707 1.293 6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 1 1-1.414-1.414L9.586 8 4.293 2.707a1 1 0 1 1 1.414-1.414m0 0'/%3E%3C/svg%3E");
 				-webkit-mask-image: var(--icon);
 				display: inline-block;
-				vertical-align: -0.0625em;
+				position: relative;
 				transform: translateX(-0.25rem);
 				opacity: 0;
+				z-index: -1;
 				mask-image: var(--icon);
 				transition: var(--transition);
 				margin-inline-start: 0.25rem;

templates/partials/articles.html

@@ -8,6 +8,7 @@
 
 <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 %}
@@ -69,5 +70,6 @@
 					<div class="blurnail" style="--blurnail: url('{{ blurnail.url }}')"></div>
 				{%- endif -%}
 			</article>
+		</div>
 	{%- endfor %}
 </div>