/*--------------------------------------------------------------
    CSS Grid library:
    This is a short framework independent CSS grid class library.
--------------------------------------------------------------*/
.grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 20px 1fr 20px 1fr;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

/* Creating Columns */

.one-column {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
}

.two-column {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
}

.three-column {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
}

.four-column {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr);
}

.side-bar-left {
    -ms-grid-columns: 2fr 4fr;
    grid-template-columns: 2fr 4fr;
}

.side-bar-right {
    -ms-grid-columns: 4fr 2fr;
    grid-template-columns: 4fr 2fr;
}

.two-side-bars {
    -ms-grid-columns: 1fr 2fr 1fr;
    grid-template-columns: 1fr 2fr 1fr;
}

/* Grid Child Elements */

.align-self-center {
    align-self: center;
}

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

.grid-row-start-1{
    grid-row-start: 1;
}

.grid-row-start-2{
    grid-row-start: 2;
}

.grid-row-start-3{
    grid-row-start: 3;
}

.grid-row-start-4{
    grid-row-start: 4;
}

.grid-column-start-1{
    grid-column-start: 1;
}

.grid-column-start-2{
    grid-column-start: 2;
}

.grid-column-start-3{
    grid-column-start: 3;
}

.grid-column-start-4{
    grid-column-start: 4;
}

/* Media Queries (Mobile First) */

@media (min-width: 992px) {

    .md-grid {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 20px 1fr 20px 1fr;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }

    .md-no-grid{
        display: block !important;
    }

    .md-one-column {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }

    .md-two-column {
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    }

    .md-three-column {
        -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
    }

    .md-four-column {
        -ms-grid-columns: (1fr)[4];
        grid-template-columns: repeat(4, 1fr);
    }

    .md-side-bar-left {
        -ms-grid-columns: 2fr 4fr;
        grid-template-columns: 2fr 4fr;
    }

    .md-side-bar-right {
        -ms-grid-columns: 4fr 2fr;
        grid-template-columns: 4fr 2fr;
    }

    .md-two-side-bars {
        -ms-grid-columns: 1fr 2fr 1fr;
        grid-template-columns: 1fr 2fr 1fr;
    }

    /* Grid Child Elements */
    .md-grid-row-start-1{
        grid-row-start: 1;
    }
    
    .md-grid-row-start-2{
        grid-row-start: 2;
    }
    
    .md-grid-row-start-3{
        grid-row-start: 3;
    }
    
    .md-grid-row-start-4{
        grid-row-start: 4;
    }

    .grid-column-start-1{
        grid-column-start: 1;
    }
    
    .md-grid-column-start-2{
        grid-column-start: 2;
    }
    
    .md-grid-column-start-3{
        grid-column-start: 3;
    }
    
    .md-grid-column-start-4{
        grid-column-start: 4;
    }

}

@media (min-width: 768px) {

    .sm-grid {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 20px 1fr 20px 1fr;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }

    .sm-no-grid{
        display: block !important;
    }

    .sm-one-column {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }

    .sm-two-column {
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    }

    .sm-three-column {
        -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
    }

    .sm-four-column {
        -ms-grid-columns: (1fr)[4];
        grid-template-columns: repeat(4, 1fr);
    }

    .sm-side-bar-left {
        -ms-grid-columns: 2fr 4fr;
        grid-template-columns: 2fr 4fr;
    }

    .sm-side-bar-right {
        -ms-grid-columns: 4fr 2fr;
        grid-template-columns: 4fr 2fr;
    }

    .sm-two-side-bars {
        -ms-grid-columns: 1fr 2fr 1fr;
        grid-template-columns: 1fr 2fr 1fr;
    }

    /* Grid Child Elements */
    .sm-grid-row-start-1{
        grid-row-start: 1;
    }
    
    .sm-grid-row-start-2{
        grid-row-start: 2;
    }
    
    .sm-grid-row-start-3{
        grid-row-start: 3;
    }
    
    .sm-grid-row-start-4{
        grid-row-start: 4;
    }

    .sm-grid-column-start-1{
        grid-column-start: 1;
    }
    
    .sm-grid-column-start-2{
        grid-column-start: 2;
    }
    
    .sm-grid-column-start-3{
        grid-column-start: 3;
    }
    
    .sm-grid-column-start-4{
        grid-column-start: 4;
    }

}