recipes: two-column card grid on mobile, compact card sizing

src/app.css

@@ -361,15 +361,22 @@ a:focus-visible {
 
 .recipe-grid {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+	grid-template-columns: repeat(2, 1fr);
-	gap: 1.5em;
+	gap: 0.8em;
-	padding: 0 1.5em;
+	padding: 0 0.8em;
 	max-width: 1400px;
 	margin: 0 auto 2em;
 }
+@media (max-width: 250px) {
+	.recipe-grid {
+		grid-template-columns: 1fr;
+	}
+}
 @media (min-width: 600px) {
 	.recipe-grid {
-		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+		gap: 1.5em;
+		padding: 0 1.5em;
 	}
 }
 @media (min-width: 1024px) {

src/lib/components/recipes/CompactCard.svelte

@@ -64,15 +64,23 @@
 }
 .info {
 	position: relative;
-	padding: 0.8em 0.9em 0.7em;
+	padding: 0.5em 0.6em 0.5em;
 	flex: 1;
 }
 .name {
-	font-size: 1.1rem;
+	font-size: 0.85rem;
 	font-weight: 600;
 	line-height: 1.3;
 	margin: 0;
 }
+@media (min-width: 600px) {
+	.info {
+		padding: 0.8em 0.9em 0.7em;
+	}
+	.name {
+		font-size: 1.1rem;
+	}
+}
 .tags {
 	display: flex;
 	flex-wrap: wrap;
@@ -82,8 +90,8 @@
 	z-index: 2;
 }
 .tag {
-	font-size: 0.9rem;
+	font-size: 0.7rem;
-	padding: 0.15rem 0.55rem;
+	padding: 0.1rem 0.4rem;
 	border-radius: var(--radius-pill);
 	background-color: var(--nord5);
 	color: var(--nord3);
@@ -101,6 +109,12 @@
 	box-shadow: var(--shadow-hover);
 	color: var(--nord0);
 }
+@media (min-width: 600px) {
+	.tag {
+		font-size: 0.9rem;
+		padding: 0.15rem 0.55rem;
+	}
+}
 @media (prefers-color-scheme: dark) {
 	.tag,
 	.tag:visited,
@@ -120,11 +134,16 @@
 	right: 0.6em;
 	width: 2em;
 	height: 2em;
-	font-size: 1.2rem;
+	font-size: 1rem;
 	background-color: var(--nord0);
 	color: white;
 	z-index: 3;
 }
+@media (min-width: 600px) {
+	.icon {
+		font-size: 1.2rem;
+	}
+}
 .favorite {
 	position: absolute;
 	top: 0.5em;