/*@example <main is="content"></main>*/
@layer component {
    [is=content] {
        flex: 1 1 auto;
        min-width: 0;
        padding: var(--space-m);
        width: 100%;
        min-height: 100%;

        > [is=app-navigation] {
            margin-bottom: var(--space-l);
        }
    }

    @media (max-width: 640px) {
        [is=content] {
            padding: var(--space-xs);
        }
    }

    [is=small-text] {
        color: var(--foreground-medium-soft-color);
        font-size: var(--font-size-s);
        line-height: 1.4;
    }
}