/**
 * grid.css
 *
 * Custom grid styles as needed
 *
**/

/***************** Site grid  */

.siteGrid {
    display: grid;
    grid-template-columns: var(--mobile-grid);
}

.siteGrid > * {
    grid-column: content;
}

.siteGrid > .alignwide,
.siteGrid > .alignfull {
    grid-column: full;
}

.alignfull > * {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--size__max-site-width-wide);
    padding-left: var(--size__site-gutter);
    padding-right: var(--size__site-gutter);
}

.l-header {
    grid-template-rows: var(--size__space-normal) 115px var(--size__space-small);
}

.l-header .sidebarGrid {
    grid-row: 2;
    padding: 0;
    position: relative;
}

.sidebarGrid {
    padding: var(--size__space-normal) 0;
}

.page-template-template-data-portal .entry .sidebarGrid {
    display: grid;
    grid-template-rows: auto auto; /* Defines two rows */
}

.page-template-template-data-portal .entry .sidebarGrid > div:nth-child(1) {
    order: 2;
}
  
.page-template-template-data-portal .entry .sidebarGrid > div:nth-child(2) {
    order: 1;
}

/*.home .l-header {
    grid-template-rows: 20px 122px 20px 1fr 50px;
}*/

@media screen and (min-width: 768px) {

    /* .siteGrid {
	    grid-template-columns: var(--tablet-grid);
	} */

    .l-header {
        /*grid-template-rows: 50px 122px 33px;*/
    }

}

@media screen and (min-width: 1024px) {

    /*.home .l-header {
		grid-template-rows: 50px 122px 120px 1fr 50px;
	}*/

    .sidebarGrid {
        display: grid;
        grid-template-columns: var(--sidebar-content-grid);
    }
    
    .sidebarRightGrid {
        display: grid;
        grid-template-columns: var(--content-sidebar-grid);
    }

    .l-sidebar {
        grid-column-start: 1;
        grid-row-start: 1;
    }

    .sidebarGrid:not(.sidebarRightGrid) .entry--content {
        grid-column-start: 3;
    }

    .l-sidebar-right {
        grid-column-start: 3;
    }

    .entry--content-left {
        grid-column-start: 1;
    }

}

@media screen and (min-width: 1110px) {

    .siteGrid {
        grid-template-columns: var(--desktop-grid);
        max-width: var(--size__max-site-width-full);
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    .siteGrid > * {
        grid-column: content;
    }

    .siteGrid > .alignwide {
        grid-column: wide;
    }

    .siteGrid-sidebar {
        grid-template-columns: var(--sidebar-content-grid);
    }

}

/***************** grid basic setup styles */

[class*="grid-"]:not([class*="-grid-"]),
.gallery {
    display: grid;
    /*padding: 0 !important;*/
}

[class*=grid-]:not([class*="-grid-"]) > *:not(script),
gallery > *:not(script) {
    display: block;
    list-style: none;
    width: 100%;
    text-decoration: none;
}

.grid-2,
.gallery-columns-2 {
    grid-gap: 23px;
}

.grid-3,
.grid-4,
.grid-5,
.gallery-columns-3,
.gallery-columns-4,
.gallery-columns-5 {
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr;
}

.l-footer .grid-2,
.l-footer .grid-3 {
    grid-gap: 30px;
}

@media screen and (min-width: 400px) {

    .grid-2,
    .gallery-columns-2 {
        grid-template-columns: 1fr 1fr;
    }

    .grid-3,
    .gallery-columns-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .grid-4,
    .grid-5,
    .gallery-columns-4,
    .gallery-columns-5 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

}

@media screen and (min-width: 1280px) {

    .grid-3,
    .gallery-columns-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .grid-4,
    .gallery-columns-4 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .grid-5,
    .gallery-columns-5 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }

}