scss/westgate/_pages.scss

@@ -339,6 +339,7 @@ a.sow-card:hover {
 
 	&.three {
 		grid-template-columns: repeat(3, 1fr);
+		gap: var(--wg-space-lg);
 	}
 
 	&.four {
@@ -593,8 +594,9 @@ a.sow-card:hover {
 }
 
 // Banners: first post image, or the shared velvet gradient
+// Friendlier crop: 8/5 keeps banners from looking vertically squished.
 .sow-banner {
-	height: 140px;
+	aspect-ratio: 8 / 5;
 	background-size: cover;
 	background-position: center;
 }
@@ -603,9 +605,11 @@ a.sow-card:hover {
 	@include wg-velvet-cover;
 }
 
-// Article page
-.sow-article-banner {
-	height: clamp(180px, 32vw, 340px);
+// Article page: the banner renders as a small card-sized thumb beside the
+// header, so mediocre source images never get stretched full-width.
+.sow-article-thumb {
+	width: 100%;
+	aspect-ratio: 8 / 5; // same crop as the blog-card banners
 	background-size: cover;
 	background-position: center;
 	border: 1px solid var(--wg-border);
@@ -618,6 +622,65 @@ a.sow-card:hover {
 	header h1 {
 		margin: 0 0 6px;
 	}
+
+	// Thumb left with the byline tucked under it; on the right the chip row
+	// pins to the image's top edge while the title centers on the image.
+	header.has-thumb {
+		display: grid;
+		grid-template-columns: minmax(240px, 320px) 1fr;
+		column-gap: var(--wg-space-md);
+		margin-bottom: var(--wg-space-sm);
+
+		.sow-article-thumb {
+			grid-column: 1;
+			grid-row: 1;
+		}
+
+		.sow-article-headline {
+			grid-column: 2;
+			grid-row: 1;
+			position: relative;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: flex-start;
+			// Reserve the chip row so the centered title never crowds it.
+			padding-top: 40px;
+
+			.sow-meta {
+				position: absolute;
+				top: 0;
+				margin: 0;
+			}
+
+			h1 {
+				margin: 0;
+			}
+
+			.sow-byline {
+				margin-top: var(--wg-space-sm);
+			}
+		}
+	}
+}
+
+@media (max-width: 700px) {
+	.sow-article header.has-thumb {
+		display: block;
+
+		.sow-article-thumb {
+			margin-bottom: var(--wg-space-sm);
+		}
+
+		.sow-article-headline {
+			display: block;
+
+			.sow-meta {
+				position: static;
+				margin-bottom: 12px;
+			}
+		}
+	}
 }
 
 .sow-article-date {