# presentation/styles/profile.style.css

> 63 lines of code and 0 definitions.

Tree: Bane's Lab Site
Language: css
Layer: product
Canonical: https://banes-lab.com/anatomy/tree#file-presentation-styles-profile-style-css
Source text: https://banes-lab.com/source/tree/presentation/styles/profile.style.css.txt

Listed in [presentation/styles](https://banes-lab.com/api/source/tree/presentation/styles.md), after [presentation/styles/panel.style.css](https://banes-lab.com/source/tree/presentation/styles/panel.style.css.md) and before [presentation/styles/record.style.css](https://banes-lab.com/source/tree/presentation/styles/record.style.css.md).

## Contained in

- [presentation/styles](https://banes-lab.com/anatomy/tree/folder-presentation-styles.md)

## Source

```css
.profile-portrait {
    display: flex;
    justify-content: center;
    margin: 0;
}

.profile-image {
    aspect-ratio: 1;
    border-radius: var(--percent-half);
    max-width: var(--profile-portrait-size);
    outline: var(--profile-portrait-ring) solid var(--accent-half);
    outline-offset: var(--profile-portrait-ring);
    width: var(--percent-full);
}

.profile-facts {
    border-top: var(--border-s) solid var(--overlay-subtle);
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: var(--profile-fact-pad) 0;
}

.profile-fact {
    border-left: var(--border-m) solid var(--accent-half);
    padding-left: var(--space-md);
}

.profile-fact dt {
    color: var(--white-alpha-faint);
    font-size: var(--font-xs);
    letter-spacing: var(--home-letter-stat);
    text-transform: uppercase;
}

.profile-fact dd {
    color: var(--white-alpha-tertiary);
    font-family: var(--font-family-heading);
    font-size: var(--font-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--profile-fact-leading);
    margin: 0;
}

.profile-topic .page-icon {
    color: var(--banes-lab-accent);
}

@media (width >= 40rem) {
    .profile-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (width >= 56.25rem) {
    .profile-facts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .profile-topics {
        column-gap: var(--home-gap);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-topic {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .profile-topic + .profile-topic::before {
        display: none;
    }
}
```