/*************************************************
DEFAULT LAYOUT
SIDEBAR SEIMBANG
15 | 35 | 35 | 15
*************************************************/

.site-grid {

    grid-gap: 0 2em;

    grid-template-columns:
        [full-start]

        minmax(0,1fr)
        [main-start]

        minmax(0,15%)
        minmax(0,35%)
        minmax(0,35%)
        minmax(0,15%)

        [main-end]
        minmax(0,1fr)

        [full-end] !important;

}


/*************************************************
OVERRIDE KHUSUS COMPANY PROFILE
SIDEBAR TIDAK SEIMBANG
25 | 35 | 35 | 5
*************************************************/

body.tpl-company .site-grid {

    grid-template-columns:
        [full-start]

        minmax(0,1fr)
        [main-start]

        minmax(0,25%)
        minmax(0,35%)
        minmax(0,35%)
        minmax(0,5%)

        [main-end]
        minmax(0,1fr)

        [full-end] !important;

}

/*************************************************
SIDEBAR MOBILE PINDAH KE ATAS
*************************************************/

@media (max-width: 768px) {

    .container-sidebar-left {
        order: -1;
        grid-area: top-a;
    }

}


/*************************************************
VARIABEL SPASI
*************************************************/

:root {
    --shb-col-gap-mobile: 0.5rem;
    --shb-mobile-side-padding: 6px;
}


/*************************************************
DESKTOP COLUMN GAP
*************************************************/

html body .site-grid {

    column-gap: 1.6rem !important;
    grid-column-gap: 1.6rem !important;

}


/*************************************************
MOBILE LAYOUT
*************************************************/

@media (max-width: 768px) {

    html body .site-grid {

        column-gap: var(--shb-col-gap-mobile) !important;
        grid-column-gap: var(--shb-col-gap-mobile) !important;

        padding-left: var(--shb-mobile-side-padding) !important;
        padding-right: var(--shb-mobile-side-padding) !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

    }

    html body :where(.content, .article, .com-content-article__body,
                     .main-content, .page, .moduletable, .module) {

        padding-left: 4px !important;
        padding-right: 4px !important;

    }

}


/*************************************************
EXTRA SMALL DEVICE
*************************************************/

@media (max-width: 480px) {

    html body .site-grid {

        padding-left: 4px !important;
        padding-right: 4px !important;

    }

}