/* 
grid > row > col : use grid system and row and col to create a grid
row > col : must be use row to create column
.col.l-*.m-*.c-* : class to create column
.grid : grid full width
.grid.wide : grid 1200px
l-* : pc
m-* : tablet
c-* : mobile
-* : [0-12] column in grid
-o : offset
no-gutters : no gutters each column
*/

.grid {
    width: 100%;
    display: block;
    padding: 0;
}

.grid.wide {
    max-width: 1200px;
    margin: 0 auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -4px;
    margin-right: -4px;
}

.row.no-gutters {
    margin-left: 0;
    margin-right: 0;
}

.col {
    padding-left: 4px;
    padding-right: 4px;
}

.row.no-gutters .col {
    padding-left: 0;
    padding-right: 0;
}

.c-0 {
    display: none;
}

.c-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.c-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* >= Tablet */
@media (min-width: 740px) {
    .row {
        margin-left: -8px;
        margin-right: -8px;
    }

    .col {
        padding-left: 8px;
        padding-right: 8px;
    }

    .m-0 {
        display: none;
    }

    .m-4,
    .m-8,
    .m-12 {
        display: block;
    }

    .m-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }

    .m-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%;
    }

    .m-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* PC medium resolution > */
@media (min-width: 1113px) {
    .row {
        margin-left: -12px;
        margin-right: -12px;
    }

    .row.sm-gutter {
        margin-left: -5px;
        margin-right: -5px;
    }

    .col {
        padding-left: 12px;
        padding-right: 12px;
    }

    .row.sm-gutter .col {
        padding-left: 5px;
        padding-right: 5px;
    }

    .l-0 {
        display: none;
    }

    .l-2-4 {
        display: block;
    }

    .l-2-4 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* Tablet - PC low resolution */
@media (min-width: 740px) and (max-width: 1023px) {
    .wide {
        width: 644px;
    }
}

/* > PC low resolution */
@media (min-width: 1024px) and (max-width: 1239px) {
    .wide {
        width: 984px;
    }

    .wide .row {
        margin-left: -12px;
        margin-right: -12px;
    }

    .wide .row.sm-gutter {
        margin-left: -5px;
        margin-right: -5px;
    }

    .wide .col {
        padding-left: 12px;
        padding-right: 12px;
    }

    .wide .row.sm-gutter .col {
        padding-left: 5px;
        padding-right: 5px;
    }

    .wide .l-0 {
        display: none;
    }

    .wide .l-2-4 {
        display: block;
    }

    .wide .l-2-4 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}