/* 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;
 }


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