feat: ✨ add character abilities component

src/components/abilities.webc

@@ -0,0 +1,67 @@
+<figure class="ability" webc:for="ability of abilities">
+  <eleventy-image
+    webc:if="img"
+    class="image"
+    :src="`src/img/${char}/${ability.id}.png`"
+    :alt="`${char}'s ${ability.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 class="info">
+    <p class="title" @text="ability.name"></p>
+    <p class="description" @text="ability.description"></p>
+  </figcaption>
+</figure>
+
+<style>
+  .ability {
+    display: grid;
+    grid-template-columns: 1fr;
+    justify-items: center;
+    align-items: center;
+    gap: 1.5em;
+
+    margin-block: 1.5em;
+    margin-inline: 0;
+
+    @media (min-width: 45em) {
+      grid-template-columns: 1fr 2fr;
+    }
+
+    & picture,
+    & .no-image {
+      display: grid;
+      grid-template-columns: subgrid;
+      justify-items: center;
+      align-content: center;
+    }
+
+    & .image {
+      max-width: 15em;
+      width: auto;
+      height: auto;
+      object-fit: contain;
+    }
+
+    & .no-image {
+      text-align: center;
+
+      border: 0.125em dashed var(--clr-box-border);
+      padding: 1em;
+
+      aspect-ratio: 1/1;
+    }
+
+    & .title {
+      font-family: var(--font-family-headings);
+      font-size: 1.5em;
+      font-weight: bold;
+      margin-block: 0;
+
+      & + .description {
+        margin-block: 0.5em 0;
+      }
+    }
+  }
+</style>