<template>
  <div :class="['h' + level]" style="justify-content: center;">
    <text :class="['txt-h' + level]">{{value}}</text>
  </div>
</template>

<script>
  module.exports = {
    props: {
      level: { default: 1 },
      value: { default: '' }
    }
  }
</script>

<style scoped>
  .h1 {
    height: 110px;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .h2 {
    height: 110px;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .h3 {
    height: 110px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  

  .txt-h1 {
    font-size: 70px;
  }

  .txt-h2 {
    font-size: 52px;
  }

  .txt-h3 {
    font-size: 42px;
  }
</style>