@media only screen and (max-width: 1400px) {
    #home .component-demos {
        grid-template-columns: repeat(3, 1fr);
    }
    #home .demo-item-large {
        grid-column: span 2;
    }
}

@media only screen and (max-width: 1054px) {
    main.docs h1 { padding: 5rem 4rem 1rem 4rem; }
    main.docs > .scrolltainer { padding: 6.5rem 4rem; }
    .split {
        display: flex;
        flex-direction: column;
    }
    #home .component-demos {
        grid-template-columns: repeat(2, 1fr);
    }
    #home .demo-item-large {
        grid-column: span 2;
    }
}


@media only screen and (max-width: 1538px) { 
    :root { --bjl-w-editor: 600px; } 
    #editor-sidemenu { padding: 3em; }
}


@media only screen and (max-width: 1436px) {
    :root { --bjl-font-size-md: 14px; }
    main#editor .sf { width: 30rem; }
}


@media only screen and (max-width: 1174px) {
    :root { --bjl-w-editor: 400px; }
    #editor-sidemenu { padding: 3em 2em; }
    #editor-nav button { padding: .25em .8em; }
}


@media only screen and (max-width: 900px) {
    #home .component-demos {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    #home .demo-item-large {
        grid-column: span 1;
    }
    #home .demo-item {
        padding: 1.25rem;
    }
    #home .demo-content {
        padding: 1rem;
    }
}

@media only screen and (max-width: 760px) {
    :root { --bjl-sidebar-width: 10em; }
    nav#main { padding: 0 3rem; }
    nav#main ul {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
    a.section-title { word-break: break-word; }

    #home {
        padding: 2rem 1rem;
    }
    #home .hero h1 {
        font-size: 3rem;
    }
    #home .tagline {
        font-size: 1.25rem;
    }
    #home .component-demos {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    #home .demo-item-large {
        grid-column: span 1;
    }
    #home .features-grid {
        grid-template-columns: 1fr;
    }
}


@media only screen and (max-width: 560px) {
    :root { --bjl-navbar-height: 8.5em; }

    #home .hero {
        padding: 2rem 0 3rem;
    }
    #home .hero h1 {
        font-size: 2.5rem;
    }
    #home .tagline {
        font-size: 1.125rem;
    }
    #home .description {
        font-size: 1rem;
    }
    #home .stats-bar {
        gap: 2rem;
    }
    #home .stat-value {
        font-size: 1.5rem;
    }
    #home .cta-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    #home .cta-buttons .button {
        width: 100%;
    }

    nav#main {
        padding: 0 1rem;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
    }
    div.lhs-container { padding: 0 1rem; }
    nav#main ul {
        height: fit-content;
        flex-direction: row;
    }

    main#editor .sf { width: 20rem; }
    main#editor { padding: 2rem; }
    div.modify-block {
        right: -6.5rem;
        gap: .25rem;
    }

}


@media only screen and (max-width: 439px) {
    :root { --bjl-w-editor: calc(100vw - 35px); }
    #editor-sidemenu { padding: 0; }
    #playground { border-radius: 0; }

    main.docs { 
        width: 100vw;
        padding-bottom: 8rem;
        align-self: flex-start;
        scroll-padding-top: 1.25rem;
    }
    main.docs h1 { 
        width: calc(100vw - 8px);
        padding: 3.5rem 2rem 1rem 2rem; 
        position: relative;
    }
    main.docs > .scrolltainer { padding: 0 2rem 4rem 2rem; }

    nav#docs, nav#docs > div.scrolltainer, div.page-sections {
        flex-direction: row;
    }
    nav#docs {
        flex-direction: row;
        width: 100vw;
        height: 10rem;
        border-radius: 0;
        z-index: 5;
        bottom: 0;
    }
    nav#docs > div.scrolltainer { 
        width: 100%;
        height: 100%;
        gap: 1rem;
        border-radius: 0;
     }
    div.page-sections { flex-direction: column; }
    a.section-title { width: 150px; }
}


@media only screen and (max-width: 375px) {
    #home {
        padding: 1.5rem 1rem;
    }
    #home .hero h1 {
        font-size: 2rem;
    }
    #home .components-showcase h2,
    #home .features-section h2 {
        font-size: 1.75rem;
    }
    #home .demo-item {
        padding: 1.25rem;
    }
    #home .demo-content {
        padding: 1rem;
    }
}


@media only screen and (min-width: 1920px) {
    div#root {
        min-width: 1920px;
        max-width: 1920px;
        width: 1920px;
    }
    main.docs { width: calc(1920px - var(--bjl-sidebar-width)); }
    main.docs h1 { width: calc(1920px - var(--bjl-sidebar-width) - 0.5rem); }
}