<template>
  <img
    class="illustration"
    :src="`/img/illustrations/${illustration}.png`"
    alt=""
  />
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    illustration: {
      type: String,
      required: true,
      default: "error",
    },
  },
  setup(props) {
    return {
      ...props,
    };
  },
});
</script>

<style lang="scss">
.illustration {
  --size: 86px;

  margin: 0 auto;
  width: var(--size);
  height: var(--size);

  @include screen-md() {
    --size: 108px;
  }

  @include screen-lg() {
    --size: 156px;
  }
}
</style>
