#about { padding: .75rem .75rem 0 }

#badges {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -.25rem;
    padding: .75rem .75rem 0;
}

#badges > * {
    align-items: center;
    background: var(--badge-background);
    border: 0;
    display: flex;
    font-weight: bold;
    margin: .25rem;
    padding: 0;
}

#badges p {
    display: flex;
    padding: .2rem .5rem;
}

#badges p:last-child {
    border: 2px solid var(--badge-background);
    border-left: 0;
}

#profile {
    font-variant: tabular-nums;
    grid-template: min-content 1fr min-content / min-content 1fr min-content;
    padding: 1rem 1rem 0;
    row-gap: 0;
}

#profile div {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

#profile div div { gap: .25rem }

#profile > nav {
    align-self: start;
    display: flex;
    gap: .5rem;
    grid-row: span 3;
}

#profile > h1 {
    align-items: center;
    display: flex;
    gap: .75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#profile img {
    border-radius: 2rem;
    grid-row: span 3;
    height: 5.5rem;
    width: 5.5rem;
}

#profile svg {
    height: 1.25rem;
    width: 1.25rem;
}

#pronouns {
    color: var(--grey);
    font-size: 1.25rem;
}

@media (max-width: 34rem) {
    #profile { grid-template-columns: min-content 1fr }

    #profile > nav {
        grid-column: span 2;
        grid-row: 4;

        /* Only add padding if it has the form, bit hacky */
        &:has(form) { padding-top: 1rem }
    }
}
