Improves image and shrinks size

website/public/css/hcard.css

@@ -1,8 +1,34 @@
 .h-card {
-	img {
+	div:has(img) {
 		width: 6rem;
 		height: 6rem;
-		border-radius: 1rem;
+		margin-inline: auto;
+
+		img {
+			width: 6rem;
+			height: 6rem;
+			border-radius: 1rem;
+			filter: contrast(1.25);
+		}
+
+		&::after {
+			/* Colour overlay */
+			background-color: var(--colour-primary-80);
+			opacity: 0.3;
+
+			/* Same size and shape as the img */
+			border-radius: 1rem;
+			width: 6rem;
+			height: 6rem;
+
+			/* Positioned on top of the img */
+			display: block;
+			position: relative;
+			top: -6rem;
+
+			/* A content value is needed to get the ::after to render */
+			content: '';
+		}
 	}
 }
 
@@ -16,7 +42,7 @@
 			"empty heading"
 			"photo text";
 
-		img {
+		div:has(img) {
 			grid-area: photo;
 			margin-block-start: var(--spacing-block-sm);
 		}

website/src/components/Me.astro

@@ -2,7 +2,9 @@
 ---
 
 <section class="h-card">
-    <img class="u-photo" src="/images/headshot.jpg" height="256" width="256" />
+    <div>
+        <img class="u-photo" src="/images/headshot.webp" height="96" width="96" />
+    </div>
 
     <header>
         <h1>