.avatar {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
}
.avatar-img, .avatar-initials {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.avatar-sm { width: 30px; height: 30px; font-size: 0.9rem; line-height: 0.9rem; }
.avatar-md { width: 40px; height: 40px; font-size: 1.2rem; line-height: 1.2rem; }
.avatar-lg { width: 50px; height: 50px; font-size: 1.5rem; line-height: 1.5rem; }
.avatar-xl { width: 60px; height: 60px; font-size: 1.8rem; line-height: 1.8rem; }