Vue component for group avatar images

avatar.vue

<template>
  <section>
    <div class="avatar-group" data-group-size="4">
      <div class="avatar">
        <img src="https://randomuser.me/api/portraits/women/10.jpg">
      </div>
      <div class="avatar">
        <img src="https://randomuser.me/api/portraits/women/2.jpg">
      </div>
      <div class="avatar">
        <img src="https://randomuser.me/api/portraits/women/3.jpg">
      </div>
      <div class="avatar">
        <img src="https://randomuser.me/api/portraits/women/4.jpg">
      </div>
    </div>

    <div class="avatar-group three" data-group-size="3">
      <div class="avatar">
        <img src="https://randomuser.me/api/portraits/women/10.jpg">
      </div>

      <div class="avatar">
        <img src="https://randomuser.me/api/portraits/women/2.jpg">
      </div>

      <div class="avatar">
        <img src="https://randomuser.me/api/portraits/women/3.jpg">
      </div>
    </div>

    <div class="avatar-group" data-group-size="2">
      <div class="avatar">
        <img src="https://randomuser.me/api/portraits/women/10.jpg">
      </div>
      <div class="avatar">
        <img src="https://randomuser.me/api/portraits/women/2.jpg">
      </div>
    </div>

    <div class="avatar-group" data-group-size="1">
      <div class="avatar">
        <img src="https://randomuser.me/api/portraits/women/10.jpg"></div>
    </div>

  </section>

</template>


<style lang="scss" scoped>

  .avatar-group {
    border-radius: 50%;
    position: relative;
    width: 6em;
    height: 6em;
    overflow: hidden;
    z-index: 1;
  }

  .avatar,
  .avatar > img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  .avatar {
    overflow: hidden;
  }


  .avatar-group[data-group-size="2"] .avatar:first-child,
  .avatar-group[data-group-size="2"] .avatar:nth-child(2) > img,
  .avatar-group[data-group-size="3"] .avatar:first-child {
    left: -25%;
  }

  .avatar-group[data-group-size="2"] .avatar:nth-child(2),
  .avatar-group[data-group-size="3"] .avatar:nth-child(2),
  .avatar-group[data-group-size="3"] .avatar:nth-child(3),
  .avatar-group[data-group-size="4"] .avatar:nth-child(2),
  .avatar-group[data-group-size="4"] .avatar:nth-child(4) {
    left: 50%;
    border-left: 2px solid white;
    margin-left: -1px;
  }

  .avatar-group[data-group-size="3"] .avatar:nth-child(3),
  .avatar-group[data-group-size="4"] .avatar:nth-child(3),
  .avatar-group[data-group-size="4"] .avatar:nth-child(4) {
    top: 50%;
    border-top: 2px solid white;
    margin-top: -1px;
  }

  .avatar-group[data-group-size="3"] .avatar:nth-child(2),
  .avatar-group[data-group-size="3"].avatar:nth-child(3),
  .avatar-group[data-group-size="4"] .avatar {
    width: 50%;
    height: 50%;
  }

</style>