@layer components {
    .profile {
        display: grid;
        gap: calc(var(--block-space) * 2);
        margin: 0 auto;
        max-inline-size: min(100ch, 100%);

        @media (min-width: 960px) {
            grid-template-columns: 1fr 1.2fr;
            align-items: start;
        }
    }

    .profile__panel {
        display: flex;
        flex-direction: column;
        gap: var(--block-space-double);
    }

    .profile__identity {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--block-space-half);
        text-align: center;
    }

    .profile__avatar {
        --avatar-size: 8ch;

        font-size: var(--text-large);
    }

    .profile__name {
        font-size: var(--text-x-large);
        line-height: 1.2;
    }

    .profile__name-form {
        display: flex;
        flex-direction: column;
        gap: var(--block-space);
    }

    .profile__field {
        display: flex;
        flex-direction: column;
        gap: calc(var(--block-space) / 4);
    }

    .profile__label {
        font-size: var(--text-small);
        font-weight: 600;
        color: var(--color-ink-dark);
    }

    .profile__signout {
        border-block-start: 1px solid var(--color-ink-lighter);
        padding-block-start: var(--block-space);
    }

    .profile__preferences {
        display: flex;
        flex-direction: column;
        gap: var(--block-space-double);
    }

    .profile__section {
        h2 {
            font-size: var(--text-large);
        }

        h3 {
            margin-block-end: calc(var(--block-space) / 4);
        }

        > * + * {
            margin-block-start: calc(var(--block-space) / 4);
        }
    }

    .profile__options {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--block-space) / 2);
    }
}