Fix mobile header overlap and thumbnail crop ratio

The language switch overlapped the centered logo on narrow viewports
(~390px), and article card covers used an overly aggressive 4:5 crop
that sliced through text baked into cover images.

frontend/app/components/ArticleCard.vue

@@ -53,7 +53,7 @@ const href = computed(() => localePath(props.locale, `/blog/${props.article.slug
 
 .cover {
   width: 100%;
-  aspect-ratio: 4 / 5;
+  aspect-ratio: 3 / 2;
   object-fit: cover;
   background: var(--color-surface);
   transition: transform 0.4s ease;

frontend/app/layouts/default.vue

@@ -105,10 +105,22 @@ const strings = computed(() => STRINGS[locale.value])
   position: relative;
 }
 
+/* Stacked and centred above the wordmark on phones — there isn't room
+   beside the centred logo without overlapping it. Pinned to the corner
+   again once the header has space to spare. */
 .lang-switch-header {
-  position: absolute;
-  top: 0;
-  right: var(--space);
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0.75rem;
+}
+
+@media (min-width: 48rem) {
+  .lang-switch-header {
+    position: absolute;
+    top: 0;
+    right: var(--space);
+    margin-bottom: 0;
+  }
 }
 
 .wordmark {