refactor: ♻️ make ability component standalone

This allows to move things that are actually content out of the character data file into page content files

src/components/ability.webc

@@ -0,0 +1,71 @@
+<figure webc:root="override">
+  <eleventy-image
+    webc:if="src"
+    class="image"
+    :src="`src/img/${$data.firstName.toLowerCase()}/${src}`"
+    :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>
+  <figcaption>
+    <p @text="name"></p>
+    <slot></slot>
+  </figcaption>
+</figure>
+
+<style webc:scoped="ability">
+  :host {
+    display: grid;
+    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: 'image caption' 1fr / 15em 1fr;
+    }
+  }
+
+  :host :where(.image, .no-image) {
+    grid-area: image;
+    display: grid;
+    place-items: center;
+    width: 15em;
+    height: 15em;
+  }
+
+  :host .image {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  :host .no-image {
+    text-align: center;
+
+    border: 0.125em dashed var(--clr-box-border);
+    padding: 1em;
+  }
+
+  :host figcaption {
+    grid-area: caption;
+
+    display: grid;
+    gap: 0.5em;
+  }
+
+  :host figcaption p {
+    margin: 0;
+  }
+
+  :host figcaption p:first-child {
+    font-family: var(--font-family-headings);
+    font-size: 1.5em;
+    font-weight: bold;
+  }
+</style>