<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: auto 1fr;
    }

    & .image,
    & .no-image {
      max-width: 15em;
    }

    & .image {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    & .no-image {
      align-content: center;
      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>
