@layer components {
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        overflow-x: hidden;

        &#root {
            main {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                justify-content: center;
            }
        }
    }

    main {
        background-color: var(--color--brand--97);
        padding: var(--space-l);
        flex: 1 0 0;
        /* margin-inline: auto;
        max-width: 700px; */
    }

    @media (min-width: 600px) {
        main {
            padding: var(--space-l) var(--space-xl);

            &.public {
                padding-inline: var(--space-3xl);
            }
        }
    }

    @media screen and (min-width: 1000px) {
        body {
            display: grid;
            grid-template-columns: 16rem 1fr 20rem;
            grid-template-rows: auto 1fr auto;
            height: 100vh;
            overflow: hidden;

            &.public {
                grid-template-columns: 16rem 34rem 1fr;
            }

            & header, footer {
                grid-column: span 3;
            }

            & > form {
                display: grid;
                grid-template-columns: subgrid;
                grid-column: span 3;
                overflow: hidden;
                align-items: stretch;

                & > main {
                    order: -1;
                }
            }

        }

        & main {
            grid-column: span 2;
            overflow-y: auto;
            padding: var(--space-xl) var(--space-2xl) var(--space-2xl);

            & div.main-inner {
                max-width: 54rem;
            }
        }
    }
}