<template>
  <div class="employee-box">
    <img :src="$helper.getImage(image)" class="image">
    <h3 class="name">{{ name }}</h3>
    <h4 class="role">{{ role }}</h4>
  </div>
</template>

<script>
export default {
  props: {
    image: String,
    name: String,
    role: String,
  },
}
</script>

<style lang="scss" scoped>
  .employee-box {
    text-align: center;
  }

  .name {
    margin: 36px 0 0;
    font-weight: 700;
    font-size: 32px;
    line-height: 28px;
    padding: 0;
  }

  .role {
    margin: 28px 0 0;
    font-weight: 500;
    font-size: 20px;
    line-height: 23.44px;
    padding: 0;
  }
</style>