/* when the tumblr controls are full width (=mobile?) */
body.tmblr-iframe-full-width { --nav-sticky-margin: calc(54px + 2rem); }
body.tmblr-iframe-full-width nav > *:not([data-section-open="true"]) { background: rgb(var(--colour-nav-background)); }
body.tmblr-iframe-full-width nav > *[data-section-label] { flex: 1!important; }
body.tmblr-iframe-full-width nav > *[data-section-label] .nav_icon, body.tmblr-iframe-full-width  nav > *.search { display: none; }

/* SMALL !!! */
@media only screen and (max-width: 60rem) {
    body { align-items: flex-start; --body-margin: 0px; --nav-sticky-margin: 0px; }
    body.tmblr-iframe-full-width { --nav-sticky-margin: 54px; }

    #main_container { flex: 1; }
    /* full screen - remove borders */
    #content_container { background: transparent; }
    #content_container, #header_container, #nav_container { border: 0px; border-radius: 0; }
    #nav_container { border-bottom: var(--border-size) solid rgb(var(--colour-border)); }

    /*  mobile nav */
    nav > *.search { display: none; }
}

/* TINY !!! */
@media only screen and (max-width: 40rem) {
    #content_container {
        grid-template-rows:
            [sidebar-start]
                auto
            [sidebar-end section-start]
                auto
            [section-end]
        ;
        grid-template-columns:
            [sidebar-start section-start]
                100%
            [sidebar-end section-end]
        ;
    }

    /*  mobile nav */
    body.tmblr-iframe-full-width nav > *[data-section-label] .nav_icon { display: none; }

    /* sidebar */
    .sidebar_main {
        grid-template-columns: auto 1fr;
        grid-template-rows: 0fr 1fr;
    }

    /* sidebar image & description */
    .sidebar_image { grid-row: 1 / -1; }
    .sidebar_title:not(:first-child):not(:last-child) {
        height: 5em; margin: 0em 0em -1rem;
        clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0% 75%);
    }
    .sidebar_title:not(:first-child):not(:last-child):hover { clip-path: polygon(0 0%, 100% 0%, 100% 75%, 0% 100%); }

    /* full height title */
    .sidebar_title:first-child:last-child { grid-row: 1 / -1; grid-column: 1 / -1; }
    .sidebar_title:last-child { grid-row: 1 / -1; }
    .sidebar_title:last-child { height: 100%!important; clip-path: none!important; margin: 0!important; }

    /* no sidebar image */
    .sidebar_title:first-child, .sidebar_title:first-child + .sidebar_description { grid-column: 1 / -1; }
    .sidebar_title:not(:first-child):not(:last-child), .sidebar_title:first-child:not(:last-child) {
        height: 5em; margin: 0em 0em -1rem;
        clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0% 75%);
    }
    .sidebar_title:not(:first-child):not(:last-child):hover, .sidebar_title:first-child:not(:last-child):hover { clip-path: polygon(0 0%, 100% 0%, 100% 75%, 0% 100%); }
}