refactor: ♻️ use grid areas and fix no-image Safari alignment bug

src/components/abilities.webc

@@ -8,7 +8,7 @@
     sizes="(min-width: 64em) 500px, 250px"
   ></eleventy-image
   ><span class="no-image" webc:else>Here you would see an illustration… If I had one…</span>
-  <figcaption class="info">
+  <figcaption class="caption">
     <p class="title" @text="ability.name"></p>
     <p class="description" @text="ability.description"></p>
   </figcaption>
@@ -17,21 +17,26 @@
 <style>
   .ability {
     display: grid;
-    grid-template-columns: 1fr;
-    justify-items: center;
-    align-items: center;
+    grid-template:
+      'image' 15em
+      'caption' 1fr / 1fr;
+    place-items: center;
     gap: 1.5em;
 
     margin-block: 1.5em;
     margin-inline: 0;
 
     @media (min-width: 45em) {
-      grid-template-columns: auto 1fr;
+      grid-template: 'image caption' 1fr / 15em 1fr;
     }
 
     & .image,
     & .no-image {
-      max-width: 15em;
+      grid-area: image;
+      display: grid;
+      place-items: center;
+      width: 15em;
+      height: 15em;
     }
 
     & .image {
@@ -41,13 +46,14 @@
     }
 
     & .no-image {
-      align-content: center;
       text-align: center;
 
       border: 0.125em dashed var(--clr-box-border);
       padding: 1em;
+    }
 
-      aspect-ratio: 1/1;
+    & .caption {
+      grid-area: caption;
     }
 
     & .title {