<template>
  <div class="employee-box">
    <img class="employee-image" :src="$helper.getImage(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;
  }

  .employee-image {
    width: 110px !important;
    border-radius: 50%;
  }

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

  .role {
    margin: 28px 0 0;
    font-weight: 200;
    font-size: 16px;
    line-height: 23.44px;
    padding: 0;
  }

  @media only screen and (max-width: 767px) {
    .role {
      margin-top: 8px;
    }

    .employee-image {
      width: 100%;
    }
  }
</style>