@layer page {
    body {
        grid-template-columns: minmax(15rem, 2fr) 10fr;

        @media screen and (max-width: 1400px) {
            grid-template-columns: 1fr;
        }
    }

    aside {
        margin: 1rem;
        padding: 1rem;

        /* @include neo-brutalist-card(); */
        border: 3px solid #222;
        border-radius: 6px;
        box-shadow: 3px 3px 0 0 #222;

        background: #f0f0f0;

        align-self: start;
        position: sticky;
        top: 7rem;
        height: calc(100dvh - 8rem - 6rem);

        nav {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;

            ul {
                list-style: none;
                padding: 0;
                margin: 0;

                display: flex;
                flex-direction: column;
                gap: 0.25rem;

                li {
                    padding-left: calc((var(--depth) - 1) * 1rem);

                    display: flex;

                    a {
                        display: block;

                        font-size: 16px;
                        font-weight: 600;

                        transform: translate(-0.25rem, 0);

                        padding: 0.125rem 0.25rem;
                        border-radius: 0.125rem;

                        color: #444;

                        &:hover {
                            background: #00000018;
                        }
                    }
                }
            }
        }

        @media screen and (max-width: 1400px) {
            display: none;
        }
    }

    footer {
        grid-column: 1 / -1;
    }

    main {
        justify-self: center;

        @media screen and (min-width: /* $screen-desktop-min */ 1024px) {
            padding: 3rem 0;
        }
    }

    pre[data-language='astro'] {
        --code-bg: #fff7ef;

        width: 100%;
        max-width: 46rem;
    }

    .container {
        margin: 2rem auto;

        border: 2px dashed #ddd;

        position: relative;
        z-index: 1;

        &.large {
            min-width: calc(100% - 4rem);
        }

        &:not(.large) {
            & > .content {
                display: grid;
                place-content: center;
            }
        }

        & > .content {
            padding: 2rem;

            overflow: auto;
        }

        /* label in the top left corner */
        &::before {
            content: 'Preview';
            position: absolute;

            bottom: 100%;
            left: 0;

            padding: 0.125rem 0.5rem;

            background: #eee;
            color: #000;

            font-family: var(--font-display);
            font-size: 14px;

            border-radius: 0.25rem;

            z-index: -1;

            transform: translate(-2px, -4px);

            opacity: 0;
            transition: opacity 64ms ease-in;
        }

        &:hover {
            border-color: #bbb;

            &::before {
                opacity: 1;
            }
        }
    }

    .palette {
        margin: 2rem auto;

        display: grid;
        grid-template-columns: auto auto;

        gap: 1rem;

        place-content: center;

        & > .color {
            width: 2rem;
            height: 2rem;
            border-radius: 0.25rem;

            border: 2px solid #000;
            box-shadow: 4px 4px 0 0 #000;

            overflow: hidden;

            & > .region {
                width: 100%;
                height: 100%;

                border: 2px solid #fff;

                border-radius: 4px;
            }
        }

        & > .label {
            display: grid;
            align-content: center;

            font-family: 'JetBrains Mono', var(--font-mono);
            font-size: 16px;

            user-select: all;
        }
    }
}
