feat: ✨ add copyright notice to ability images

src/components/ability.webc

@@ -6,8 +6,13 @@
     :alt="`${$data.firstName.toLowerCase()}'s ${name}`"
     :width="[250, 500]"
     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>
+  ></eleventy-image>
+  <p class="copyright" webc:if="alt">
+    <template webc:nokeep @text="alt"></template>
+    &copy;
+    <a :href="href" target="_blank" @text="artist"></a>
+  </p>
+  <span class="no-image" webc:else>Here you would see an illustration… If I had one…</span>
   <figcaption>
     <p @text="name"></p>
     <slot></slot>
@@ -16,18 +21,23 @@
 
 <style webc:scoped="ability">
   :host {
+    --grid-spacing: 1.5em;
+
     display: grid;
     grid-template:
       'image' 15em
+      'copyright' auto
       'caption' 1fr / 1fr;
     place-items: center;
-    gap: 1.5em;
 
     margin-block: 1.5em;
     margin-inline: 0;
 
     @media (min-width: 45em) {
-      grid-template: 'image caption' 1fr / 15em 1fr;
+      grid-template:
+        'image caption' 1fr
+        'copyright caption' / 15em 1fr;
+      column-gap: var(--grid-spacing);
     }
   }
 
@@ -54,11 +64,22 @@
     text-wrap: balance;
   }
 
+  :host .copyright {
+    grid-area: copyright;
+    margin: 0;
+  }
+
   :host figcaption {
     grid-area: caption;
 
     display: grid;
     gap: 0.5em;
+
+    margin-block: var(--grid-spacing) 0;
+
+    @media (min-width: 45em) {
+      margin: 0;
+    }
   }
 
   :host figcaption p {