diff --git a/frontend/src/lib/components/ArticleCard.svelte b/frontend/src/lib/components/ArticleCard.svelte
index f82b6db..d46b9d4 100644
--- a/frontend/src/lib/components/ArticleCard.svelte
+++ b/frontend/src/lib/components/ArticleCard.svelte
@@ -373,4 +373,13 @@
     .hero h3, .herotype h3 { font-size: 1.6rem; }
     .herotype .body { padding: 30px 24px; }
   }
+
+  /* On phones the feed is a single column, so the banner no longer carries the
+     job of keeping a uniform grid height. Trim photos to reclaim vertical
+     space, and shrink image-less placeholders to a slim topic label band. */
+  @media (max-width: 540px) {
+    .tile .media { aspect-ratio: 2 / 1; }
+    .tile .media.placeholder { aspect-ratio: auto; height: 54px; }
+    .tile .media.placeholder .ph-word { font-size: 1.15rem; }
+  }
 </style>