/* Base variables */
:root {

    /* Base Values */
    --page-padding: 1.5rem;
    --grid-col-gap: 1.5%;
    --grid-row-gap: 1.5%;
    -grid-sizing-2: calc(100% / (12/2)) + 0%;

}

/* Grid */

[class*="bgrid"] {
    display: grid;
    grid-column-gap: var(--grid-col-gap);
    grid-row-gap: var(--grid-row-gap);
    justify-items: stretch;
    align-items: start;
}

.bgrid-builder {
    grid-template-columns: repeat(12, 1fr);
}

.bgrid-autocols {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.bgrid-autocols.grid_fill {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.gcol-1 {
    grid-column: span 1;
}

.gcol-2 {
    grid-column: span 2;
}

.gcol-3 {
    grid-column: span 3;
}

.gcol-4 {
    grid-column: span 4;
}

.gcol-5 {
    grid-column: span 5;
}

.gcol-6 {
    grid-column: span 6;
}

.gcol-7 {
    grid-column: span 7;
}

.gcol-8 {
    grid-column: span 8;
}

.gcol-9 {
    grid-column: span 9;
}

.gcol-10 {
    grid-column: span 10;
}

.gcol-11 {
    grid-column: span 11;
}

.gcol-12 {
    grid-column: span 12;
}

.bgrid-cols-1 {
    grid-template-columns: repeat(1, auto);
}

.bgrid-cols-2 {
    grid-template-columns: repeat(2, auto);
}

.bgrid-cols-3 {
    grid-template-columns: repeat(3, auto);
}

.bgrid-cols-4 {
    grid-template-columns: repeat(4, auto);
}

.bgrid-cols-5 {
    grid-template-columns: repeat(5, auto);
}

.bgrid-cols-6 {
    grid-template-columns: repeat(6, auto);
}

.bgrid-cols-7 {
    grid-template-columns: repeat(7, auto);
}

.bgrid-cols-8 {
    grid-template-columns: repeat(8, auto);
}

.bgrid-cols-9 {
    grid-template-columns: repeat(9, auto);
}

.bgrid-cols-10 {
    grid-template-columns: repeat(10, auto);
}

.bgrid-cols-11 {
    grid-template-columns: repeat(11, auto);
}

.bgrid-cols-12 {
    grid-template-columns: repeat(12, auto);
}


.bgrid_align-start {
    align-items: start;
}

.bgrid_align-stretch {
    align-items: stretch;
}

.bgrid_align-center {
    align-items: center;
}

.bgrid_align-end {
    align-items: end;
}

.bgrid_justify-start {
    justify-items: start;
}

.bgrid_justify-stretch {
    justify-items: stretch;
}

.bgrid_justify-center {
    justify-items: center;
}

.bgrid_justify-end {
    justify-items: end;
}

.justify_self-stretch {
    justify-self: stretch;
}

.justify_self-center {
    justify-self: center;
}

.justify_self-start {
    justify-self: start;
}

.justify_self-end {
    justify-self: end;
}

@media (max-width: 36rem) {
    [class*="bgrid-col"] {
        grid-template-columns: repeat(1, auto);
    }
}