@layer components {

/* Generic page layout */
    .page-layout {
        display: block;
    }

    .page-layout--sidebar {
        display: grid;
        gap: var(--space-16);
        margin-block: var(--space-32);

        @media (min-width: 1200px) {
            grid-template-columns: minmax(0, 1fr) 20rem;
            align-items: start;
        }
    }

    .page-layout__content,
    .page-layout__sidebar {
        min-width: 0;
    }

    /* Shared main layout */
    .layout-main {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
        gap: var(--space-24);
        margin-top: var(--space-24);

        @media (min-width: 1200px) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }


    .main__content {
        grid-column: 1 / -1;
        min-width: 0;

        @media (min-width: 1200px) {
            grid-column: 1 / span 3;
        }
    }

    .main__sidebar {
        display: none;
        grid-column: 4 / span 1;
        gap: var(--space-20);
        min-width: 0;

        @media (min-width: 1200px) {
            display: grid;
        }
    }
}