edited ImageSubtitle formatting

src/lib/image-subtitle.svelte

@@ -6,16 +6,26 @@
     } = $props();
 </script>
 
+<div class="image-subtitle-container">
+    <span class="image-arrow">↳</span>
     <span class="image-subtitle">{content}</span>
+</div>
 
 <style>
-    .image-subtitle::before {
-        content: "↳ ";
-    }
-    .image-subtitle {
-        display: block;
-        width: 80%;
+    .image-subtitle-container {
+        display: flex;
+        flex-direction: row;
+        width: var(--media-width);
         margin: 0 auto;
+    }
+
+    .image-subtitle, .image-arrow {
         font-size: 1rem;
+        line-height: 1.2rem;
+        margin: 2px 0 0 0;
+    }
+
+    .image-arrow {
+        margin-right: 4px;
     }
 </style>

src/routes/+layout.svelte

@@ -134,6 +134,9 @@
             --margin-header-top: 16px;
             --margin-header-bottom: 8px;
 
+            /* sizing */
+            --media-width: 80%;
+
             /* page sizing */
             --page-width: 1000px;
             --screen-width-mobile: 800px;
@@ -277,7 +280,7 @@
         }
 
         img, video {
-            width: 80%;
+            width: var(--media-width);
             margin-left: auto;
             margin-right: auto;
             display: flex;
@@ -286,7 +289,7 @@
         }
 
         .horizontally-centre-aligned {
-            width: 80%;
+            width: var(--media-width);
             display: flex;
             justify-content: center;
             align-items: center;