<template>
  <figure class="figure">
    <slot name="img"></slot>
    <figcaption class="figure__meta">
      <slot name="caption"></slot>
      <slot name="copyright"></slot>
    </figcaption>
  </figure>
</template>

<script>
export default {};
</script>

<style lang="scss">
@import "@scss/_variables.scss";

.figure {
  margin: 1em 0;

  &__meta {
    text-align: center;
  }

  img {
    display: block;
    width: 100%;
  }

  label,
  a {
    font-size: 0.8em;
    font-style: italic;
    color: $copy-color;
  }

  label:after {
    display: inline;
    content: " ";
  }

  a:before {
    display: inline;
    content: "©";
  }
}
</style>
