<div class="avatar-grid avatar-grid--items-4">
    <img class="avatar-grid__item" alt="0" src="//placeponi.es/100/100/2">
    <img class="avatar-grid__item" alt="1" src="//placeponi.es/100/100/3">
    <img class="avatar-grid__item" alt="2" src="//placeponi.es/100/100/4">
    <img class="avatar-grid__item" alt="3" src="//placeponi.es/100/100/5">
</div>
<div class="avatar-grid avatar-grid--items-{{ avatars.length }}">
    {{#each avatars}}
    <img class="avatar-grid__item" alt="{{ @key }}" src="{{ this }}">
    {{/each}}
</div>
{
  "avatars": [
    "//placeponi.es/100/100/2",
    "//placeponi.es/100/100/3",
    "//placeponi.es/100/100/4",
    "//placeponi.es/100/100/5"
  ]
}

Takes between one and four images.

For one and four images, the layout uses square images. For two images, both images are cropped to 1:2 ratio. For three images, the first image is cropped to 2:1 ratio while the others remain square.