From e0d1f62eb32e352178ab8f3c07bfc8709c27a1b4 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Mon, 7 Apr 2025 21:26:01 +0200
Subject: [PATCH] refactor: :recycle: adjust ref image component for nesting in
 gallery component

---
 src/components/ref-img.webc | 16 +++++++---------
 src/css/base.css            |  2 --
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/components/ref-img.webc b/src/components/ref-img.webc
index 09c40ef..fd67f01 100644
--- a/src/components/ref-img.webc
+++ b/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>
diff --git a/src/css/base.css b/src/css/base.css
index a4d5d5d..1edfdbe 100644
--- a/src/css/base.css
+++ b/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) {