.avatar {
    /* Center the content */
    display: inline-block;
    vertical-align: middle;

    /* Used to position the content */
    position: relative;

    /* Colors */

    color: #fff;

    /* Rounded border */
    border-radius: 50%;
}

.avatar__letters {
    /* Center the content */
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.avatars-compact {
    position: relative;
    .avatar {
        margin-left: -9px;
    }
}