/* PAGeS LAYOUTS */
/* 1 KOlOm */

@supports (grid-area:auto) {
    @media (min-width: 1024px ) {
        #one-aside {
            display: grid;
            min-height: 100vh;
            grid-template-rows: auto 1fr auto;
            grid-template-columns: var(--sidebar1-width) 1fr;
            grid-template-areas: 
                "nav nav"
		        "aside1 content"
		        "footer footer"
		    ;
           
        }

        #one-aside.right {
            grid-template-columns: 1fr var(--sidebar1-width);
            grid-template-areas: 
         "nav nav"
		    "content aside1"
		    "footer footer"
		    ;
        }

        #two-asides {
            display: grid;
            min-height: 100vh;
            grid-template-rows: auto 1fr auto;
            grid-template-columns: var(--sidebar1-width) 1fr;
            grid-template-areas: "nav nav"
        "aside1 content"
        "aside1 aside2"
        "footer footer"
        ;
        }
    }

    @media (min-width:1200px) {
        #two-asides {
            display: grid;
            min-height: 100vh;
            grid-template-rows: auto 1fr auto;
            grid-template-columns: var(--sidebar1-width) 1fr var(--sidebar2-width);
            grid-template-areas: "nav nav nav"
        "aside1 content aside2"
        "footer footer footer"
        ;
        }
    }

    #nav-load {
        grid-area: nav;
    }

    #content {
        grid-area: content;
    }

    
    #one-aside footer,
    #two-asides footer {
        grid-area: footer;
    }

    #one-aside #aside1,
    #two-asides #aside1 {
        grid-area: aside1 ;
    }

    #one-aside #aside2,
    #two-asides #aside2 {
        grid-area: aside2;

        /* display: flex; */
    }
}

/* -----> zijbalken */
#aside1 {
    background-color: var(--sidebar1-bg);
    color: var(--sidebar1-fontcolor);
}

#aside2 {
    background-color: var(--sidebar2-bg);
     color: var(--sidebar2-fontcolor);
}
#aside1 a{
    color: var(--sidebar1-fontcolor);
}
#aside2 a{
    color: var(--sidebar2-fontcolor);
}
#aside1 a[data-gs-button]{
    color: var(--button-sidebar1-color);
    background: var(--button-sidebar1-bgcolor)
}
#aside2 a[data-gs-button]{
    color: var(--button-sidebar2-color);
    background: var(--button-sidebar2-bgcolor)

}
#aside1 a[data-gs-button]{
    min-width: var(--button-sidebar1-min-width);
}
#aside2 a[data-gs-button]{
    min-width: var(--button-sidebar2-min-width);
}

#aside1 a[data-gs-button]:hover{
    color: var(--button-sidebar1-color-hover);
    background-color: var(--button-sidebar1-bgcolor-hover)
}
#aside2 a[data-gs-button]:hover{
    color: var(--button-sidebar2-color-hover);
    background-color: var(--button-sidebar2-bgcolor-hover)

}
#aside1 a[data-gs-button]:active{
    color: var(--button-sidebar1-color-active);
    background-color: var(--button-sidebar1-bgcolor-active);

}
#aside2 a[data-gs-button]:active{
    color: var(--button-sidebar2-color-active);
    background: var(--button-sidebar2-bgcolor-active)

}
#aside1 section,
#aside2 section {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: transparent;
    padding: var(--space-medium);
}

#aside1 section > * ,
#aside2 section > *{
    margin-bottom: 1em;
}

#aside1 article ,
#aside2 article {
    background-color: transparent;
}

/* einde zijbalken */

/* einde zijbalken */