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/assets/css/main.css

@@ -13,8 +13,18 @@
 
   --width: 76rem;
   --width-prose: 40rem;
-  --space: 1.5rem;
   --radius: 2px;
+
+  /* Breakpoints used throughout: 48rem = tablet, 64rem = desktop. */
+  --space: 1.1rem;
+  --gap-section: 2.5rem;
+}
+
+@media (min-width: 48rem) {
+  :root {
+    --space: 1.5rem;
+    --gap-section: 4rem;
+  }
 }
 
 *,
@@ -99,7 +109,7 @@ h3 {
   display: flex;
   align-items: center;
   gap: 1.25rem;
-  margin-block: 4rem 2rem;
+  margin-block: var(--gap-section) 1.75rem;
 }
 
 .section-heading::after {
@@ -111,8 +121,8 @@ h3 {
 
 /* Centred title block at the top of a listing page. */
 .page-header {
-  margin-bottom: 3.5rem;
-  padding-bottom: 2rem;
+  margin-bottom: var(--gap-section);
+  padding-bottom: 1.75rem;
   text-align: center;
   border-bottom: 1px solid var(--color-border);
 }
@@ -127,17 +137,40 @@ h3 {
 
 .card-grid {
   display: grid;
-  gap: 3rem 2.5rem;
-  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+  gap: 2.25rem 1.5rem;
+  /* One column on phones, two on tablets, three or more on wide screens. */
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
   padding: 0;
   margin: 0;
   list-style: none;
 }
 
+@media (min-width: 48rem) {
+  .card-grid {
+    gap: 3rem 2.5rem;
+  }
+}
+
 /* Article body */
 .prose {
   max-width: var(--width-prose);
-  font-size: 1.075rem;
+  font-size: 1.0125rem;
+  /* Editors paste long URLs; without this they push the page sideways. */
+  overflow-wrap: break-word;
+}
+
+@media (min-width: 48rem) {
+  .prose {
+    font-size: 1.075rem;
+  }
+}
+
+/* Markdown tables have no wrapper to scroll, so the table scrolls itself. */
+.prose table {
+  display: block;
+  max-width: 100%;
+  overflow-x: auto;
+  border-collapse: collapse;
 }
 
 .prose h2,
@@ -193,10 +226,10 @@ h3 {
 .pagination {
   display: flex;
   flex-wrap: wrap;
-  gap: 2rem;
+  gap: 1rem 2rem;
   align-items: center;
   justify-content: center;
-  margin-top: 4rem;
+  margin-top: var(--gap-section);
   padding-top: 2rem;
   border-top: 1px solid var(--color-border);
   font-size: 0.85rem;