:root {
    --inner-border-color: hsl(275, 15%, 92%);
}

.main {
    display: flex;
    flex-wrap: nowrap;

    @mixin sidebar-gap {
        position: sticky;
        top: var(--space-xl);
        height: calc(100vh - var(--space-xl));
    }   

    .notes-sidebar {
        order: 2;

        @media screen and (min-width: 768px) {
            @include sidebar-gap;
            flex: 0 0 31.25%;
            order: 0;
            border-right: 1px solid var(--inner-border-color);
        }

        @media(min-width: 992px) {
            flex: 0 1 25%;
        }
    }

    .page-sidebar {
        display: none;

        @media screen and (min-width: 992px) {
            display: block;
            order: 2;
            flex: 0 0 18.75%;
            border-left: 1px solid var(--inner-border-color);
            @include sidebar-gap;
        }
    }

    article {
        order: 1;
        padding-bottom: 3rem;
        
        @media screen and (min-width: 768px) {
            flex: 0 0 68.75%;
            order: 1;
        }

        @media screen and (min-width: 992px) {
            flex: 0 1 56.25%;
        }
    }
}