<figure class="ref-image">
  <eleventy-image
    class="image"
    :class="(dropshadow ? 'dropshadow' : '')"
    :src="`src/img/${char}/${src}`"
    :alt="`${alt} by ${artist}`"
    :width="width"
    sizes="1000px"
  ></eleventy-image>
  <figcaption class="caption">
    <template webc:nokeep @text="alt"></template>
    &copy;
    <a :href="href" target="_blank" @text="artist"></a>
  </figcaption>
</figure>

<style>
  .ref-image {
    display: grid;
    grid-template-rows: 1fr auto;
    place-content: center;
    row-gap: 1rem;

    margin-block: 0;
    margin-inline: auto;

    & img {
      display: block;
      width: 100%;
      height: 100%;
      max-height: 35rem;
      object-fit: contain;
      border-radius: 1em;
    }

    & .dropshadow {
      filter: drop-shadow(0.5em 0.25em 0.375em oklch(0 0 0 / 0.5));
    }

    & .caption {
      text-align: center;
    }
  }
</style>
