/* scss/Core/_Grid.scss */





/* Grid System */


.grid, .ids-container {
    display: grid;

    &__two-column {
         grid-template-columns: 1fr 1fr;
    }
 
    &__three-column {
         grid-template-columns: 1fr 1fr 1fr;
    }

    &__four-column {
         grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    &__five-column {
         grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }


    .item {
        &__span-2-columns {
            grid-column: span 2;  
        }

        &__span-3-columns {
            grid-column: span 3;  
        }
        
        &__span-4-columns {
            grid-column: span 4;  
        }

        &__span-5-columns {
            grid-column: span 5;  
        }        
    } 

}



/* Demo Styles for Style Guide */ 

.grid__two-column.demo {
        padding: 1em 0;
        grid-gap: 1%;
        grid-row-gap: 1em;
}


.demoBlock {
    background: $primary-color;
    color: #fff;
    margin: 1em;
    justify-self: stretch;
    line-height: 5;
    text-align: center;
    @include borderRadius(2px);

}





.demoContainer {
    background: rgba($tertiary-color-2, 0.05);
}