<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";
@import "@scss/_mixins.scss";

.figure {
  margin: 1em auto;
  text-align: center;

  img {
    width: 100%;
    object-fit: contain;

    @include mq-desktop {
      max-width: 70em;
      max-height: 80vh;
    }
  }

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

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

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