.avatar {
    composes: cos-avatar -v-text -v-w -v-h -v-border-none from global;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    color: var(--color-gray-800);
    background: var(--color-gray-200);
    border-radius: 50%;
}

.avatar img {
    display: block;
    height: 100%;
    max-width: 100% !important;
    object-fit: cover;
}

.content,
.placeholder,
.fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
}