refactor: ♻️ adjust ref image component for nesting in gallery component

src/components/ref-img.webc

@@ -2,7 +2,7 @@
   <eleventy-image
     class="image"
     :class="(dropshadow ? 'dropshadow' : '')"
-    :src="src"
+    :src="`src/img/${char}/${src}`"
     :alt="`${alt} by ${artist}`"
     :width="width"
     sizes="1000px"
@@ -16,7 +16,11 @@
 
 <style>
   .ref-image {
-    max-width: var(--refimage-max-width);
+    display: grid;
+    grid-template-rows: 1fr auto;
+    place-content: center;
+    row-gap: 1rem;
+
     margin-block: 0;
     margin-inline: auto;
 
@@ -26,11 +30,7 @@
       height: 100%;
       max-height: 35rem;
       object-fit: contain;
-    }
-
-    & .image,
-    & .caption {
-      flex: 0 0 auto;
+      border-radius: 1em;
     }
 
     & .dropshadow {
@@ -39,8 +39,6 @@
 
     & .caption {
       text-align: center;
-      margin-block: 1rem 0;
-      margin-inline: 0;
     }
   }
 </style>

src/css/base.css

@@ -16,8 +16,6 @@
 
   --textblock-padding: 0 var(--container-spacing-right-safe) 0 var(--container-spacing-left-safe);
 
-  --refimage-max-width: 50rem;
-
   --transition-color: color 0.5s, background-color 0.5s;
 
   @media (min-height: 64em) {