.user-profile-header {
    display: flex;
    align-items: center;
    gap: 32px;
}

.user-profile-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 176px;
    width: 176px;
    height: 176px;
    border-radius: 50%;
    background: #e4e4e7;
    color: #71717a;
}

.dark .user-profile-avatar { background: #27272a; color: #a1a1aa; }
.user-profile-avatar svg { width: 48%; height: 48%; }

.user-profile-name {
    margin-top: 8px;
    font-size: clamp(32px, 4vw, 60px);
    font-weight: 800;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

@media (max-width: 540px) {
    .user-profile-header { align-items: flex-start; flex-direction: column; gap: 16px; }
    .user-profile-avatar { width: 112px; height: 112px; flex-basis: 112px; }
}