tidy up the query pattern

quadrat/assets/theme.css

@@ -57,22 +57,38 @@
 }
 
 div.horizontal-query-pattern {
-	align-items: stretch;
-	flex-wrap: nowrap;
 	gap: 0;
 }
 
+@media (min-width: 600px) {
+	div.horizontal-query-pattern {
+		flex-wrap: nowrap;
+	}
+}
+
 div.horizontal-query-pattern .wp-block-cover,
 div.horizontal-query-pattern figure.wp-block-post-featured-image {
 	margin-top: 0;
 }
 
-div.horizontal-query-pattern img {
+@media (min-width: 600px) {
+	div.horizontal-query-pattern figure.wp-block-post-featured-image {
+		width: 57%;
+	}
+}
+
+div.horizontal-query-pattern figure.wp-block-post-featured-image img {
 	aspect-ratio: 1.12;
 	-o-object-fit: cover;
 	   object-fit: cover;
 }
 
+@media (min-width: 600px) {
+	div.horizontal-query-pattern figure.wp-block-post-featured-image img {
+		min-height: 360px;
+	}
+}
+
 .wp-block-cover.is-style-quadrat-cover-diamond::after {
 	background-image: url(rotated.svg);
 	background-position: center;

quadrat/sass/block-patterns/_query.scss

@@ -16,17 +16,30 @@
 }
 
 div.horizontal-query-pattern {
-	align-items: stretch;
-	flex-wrap: nowrap;
 	gap: 0;
 
+	@include break-small() {
+		flex-wrap: nowrap;
+	}
+
 	.wp-block-cover,
 	figure.wp-block-post-featured-image {
 		margin-top: 0;
 	}
 
-	img {
-		aspect-ratio: 1.12;
-		object-fit: cover;
+	figure.wp-block-post-featured-image {
+		@include break-small() {
+			width: 57%; // I'm not sure why this number works but it does seem to!
+		}
+
+
+		img {
+			aspect-ratio: 1.12;
+			object-fit: cover;
+
+			@include break-small() {
+				min-height: 360px;
+			}
+		}
 	}
 }