/* -------------------------------------------------------------------------- */
/* RTB-RESP.CSS (c) richardthebrave.com ------------------------------------- */

/* -----------------------------------------------------------------------------
* MARK: XS (576px)
*/

@media only screen and (min-width: 36rem) {

    .portal-posts, .portal-services {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* -----------------------------------------------------------------------------
* MARK: SM (768px)
*/

@media only screen and (min-width: 48rem) {
    
    .portal-disciplines {
        grid-template-columns: repeat(3, 1fr);
    }

    .prev-next-post {
        grid-template-columns: repeat(2, 1fr);
    }
    .prev-next-post > :nth-child(2) {
        text-align: right;
    }
    
    
    .columns {
        grid-template-columns: repeat(12, 1fr);
    }
    .columns .column {
        grid-column: span var(--span);
    }

        /* swap to desktop nav */
        .site-header {
            flex-direction: column;
            padding-bottom: 0;
        }
        .site-nav {
            display: block;
        }
        .mobile-nav-toggle {
            display: none; /* for mobile */
        }
    
}

/* -----------------------------------------------------------------------------
* MARK: MD (960px)
*/

@media only screen and (min-width: 60rem) {

}

/* -----------------------------------------------------------------------------
* MARK: LG (1152px)
*/

@media only screen and (min-width: 72rem) {

    .portal-posts {
        grid-template-columns: repeat(3, 1fr);
    }
    .portal-services {
        grid-template-columns: repeat(4, 1fr);
    }
    .site-header {
        flex-direction: row;
        padding-block: var(--space-base);
    }
    .site-nav {
        border: 0;
        width: auto;
    }
    .site-nav > .menu {
        gap: var(--space-xs) var(--space-xs);
        justify-content: end;
    }
    

}

/* -----------------------------------------------------------------------------
* MARK: XL (1344px)
*/

@media only screen and (min-width: 84rem) {

}

/* -----------------------------------------------------------------------------
* MARK: 2XL (1344px)
*/

@media only screen and (min-width: 96rem) {

}