public/css/group-avatars.css

.avatar_collage {
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

.avatar_collage img {
    position: absolute;
    overflow: hidden;
}

.collage_2 .img_1 {
    left: 0;
    top: 0;
    max-width: 50%;
    max-height: 100%;
    width: 50%;
    height: 100%;
}

.collage_2 .img_2 {
    left: 50%;
    top: 0;
    max-width: 50%;
    max-height: 100%;
    width: 50%;
    height: 100%;
}

.collage_3 .img_1 {
    left: 0;
    top: 0;
    max-width: 50%;
    max-height: 50%;
    width: 50%;
    height: 50%;
}

.collage_3 .img_2 {
    left: 50%;
    top: 0;
    max-width: 50%;
    max-height: 50%;
    width: 50%;
    height: 50%;
}

.collage_3 .img_3 {
    left: 0;
    top: 50%;
    max-width: 100%;
    max-height: 50%;
    width: 100%;
    height: 50%;
}

.collage_4 .img_1 {
    left: 0;
    top: 0;
    max-width: 50%;
    max-height: 50%;
    width: 50%;
    height: 50%;
}

.collage_4 .img_2 {
    left: 50%;
    top: 0;
    max-width: 50%;
    max-height: 50%;
    width: 50%;
    height: 50%;
}

.collage_4 .img_3 {
    left: 0;
    top: 50%;
    max-width: 50%;
    max-height: 50%;
    width: 50%;
    height: 50%;
}

.collage_4 .img_4 {
    left: 50%;
    top: 50%;
    max-width: 50%;
    max-height: 50%;
    width: 50%;
    height: 50%;
}