.avatar-sm {
    width: 28px;
    height: 28px;
    object-fit: cover;
    flex-shrink: 0;
}

.avatar-md,
.response-avatar img,
.response-avatar-fallback {
    width: 42px;
    height: 42px;
}

.avatar-lg,
.post-card-author-avatar img,
.post-card-author-fallback {
    width: 56px;
    height: 56px;
    object-fit: cover;
}

.avatar-xl {
    width: 96px;
    height: 96px;
    object-fit: cover;
}

.avatar-2xl {
    width: 144px;
    height: 144px;
    object-fit: cover;
}

.response-avatar-fallback {
    background: var(--secondary-link-color);
    color: var(--primary-link-color);
}

.avatar-fallback {
    background: var(--secondary-link-color);
    color: var(--primary-link-color);
}

.app-user-toggle .post-card-author-fallback,
.widget-avatar-fallback {
    width: 42px;
    height: 42px;
}

.profile-picture-card > .card-header > div {
    width: 100%;
}

.profile-picture-card__meta {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.profile-picture-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.profile-picture-preview__avatar {
    width: clamp(128px, 36vw, 152px);
    height: clamp(128px, 36vw, 152px);
}

.profile-picture-preview .avatar-fallback i {
    font-size: clamp(4rem, 15vw, 4.75rem);
    line-height: 1;
}

@media (max-width: 575.98px) {
    .profile-picture-card > .card-header {
        text-align: center;
    }
}