.author-line{display:flex;align-items:center;gap:.75rem;> .avatar { border-radius: 999px; width: 2.5rem; height: 2.5rem; &.-placeholder { display: flex; align-items: center; justify-content: center; background-color: var(--primary); } &.-placeholder > svg { width: 2.5rem; height: 2.5rem; } } > .info { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.5rem; row-gap: 0.125rem; > .name { font-weight: 600; } > .level { display: flex; align-items: center; justify-content: center; gap: 0.25rem; height: fit-content; width: fit-content; padding-inline: 0.5rem; padding-block: 0.125rem; font-size: 0.875rem; } > .level > svg { width: 0.875rem; height: 0.875rem; } > .handle { flex-basis: 100%; font-size: 0.875rem; color: var(--text-muted); } }}