Make the site responsive for phones, tablets, and desktop

Mobile-first layout with breakpoints at 48rem (tablet) and 64rem (desktop):
stacked nav on phones, progressive column counts for the article grid and
footer, scrollable markdown tables, larger tap targets on nav links.

frontend/app/pages/index.vue

@@ -40,21 +40,20 @@ useSeoMeta({
     <p v-else-if="!featured">{{ $t('list.empty') }}</p>
 
     <template v-else>
-      <article class="featured">
+      <article class="featured" :class="{ 'has-cover': featuredCover }">
         <NuxtLinkLocale
+          v-if="featuredCover"
           class="featured-cover"
           :to="`/blog/${featured.slug}`"
           tabindex="-1"
           aria-hidden="true"
         >
           <img
-            v-if="featuredCover"
             :src="featuredCover"
             :alt="featured.cover?.alternativeText ?? ''"
             :width="featured.cover?.width ?? undefined"
             :height="featured.cover?.height ?? undefined"
           >
-          <span v-else class="placeholder" />
         </NuxtLinkLocale>
 
         <div class="featured-text">
@@ -97,25 +96,33 @@ useSeoMeta({
 <style scoped>
 .featured {
   display: grid;
-  gap: 2.5rem;
+  gap: 1.5rem;
   align-items: center;
   grid-template-columns: 1fr;
 }
 
-@media (min-width: 52rem) {
-  .featured {
+/* Stacked on phones and portrait tablets — a side-by-side split below this
+   width leaves both the image and the headline too cramped to read. The split
+   also needs a cover to sit in it, or one column would just be empty. */
+@media (min-width: 64rem) {
+  .featured.has-cover {
     grid-template-columns: 1.35fr 1fr;
     gap: 3.5rem;
   }
 }
 
+/* Without a cover the headline is the whole lead, so it gets the full width
+   but stays inside a readable measure. */
+.featured:not(.has-cover) .featured-text {
+  max-width: 46rem;
+}
+
 .featured-cover {
   display: block;
   overflow: hidden;
 }
 
-.featured-cover img,
-.placeholder {
+.featured-cover img {
   width: 100%;
   aspect-ratio: 3 / 2;
   object-fit: cover;
@@ -156,7 +163,7 @@ useSeoMeta({
 }
 
 .more {
-  margin-top: 4rem;
+  margin-top: var(--gap-section);
   text-align: center;
   font-size: 0.75rem;
   font-weight: 600;