.avatar {

color: $white;
background-color: $gray-500;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: $font-paragraph;
border-radius: 50%;
height: 48px;
width: 48px;

}

.avatar img {

width: 100%;
border-radius: 50%;

}

.avatar + .avatar-content {

display: inline-block;
margin-left: .75rem;

} .avatar-lg {

width: 58px;
height: 58px;
font-size: $font-size-sm;

}

.avatar-sm {

width: 38px;
height: 38px;
font-size: $font-size-sm;

}

// Overlapped avatars

.avatar-group {

.avatar {
        position: relative;
        z-index: 2;
        border: 2px solid $card-bg;

        &:hover {
                z-index: 3;
        }
}

.avatar + .avatar {
        margin-left: -1rem;

}

}