/*---[ grid.less ]------------------------------------------------------------*/

// variables
@import "variables.less";
@import "mixins.less";

.grid {
    height: 100%;
    position: relative;
    background-color: @grid-bg;
    > .grid-item {
        min-width: percentage((1 / @grid-columns));
        background-color: @grid-item-bg;
        // allow to position center and middle
        display: table;
        position: absolute;
        padding: @grid-item-padding;
        margin: @grid-item-margin;
        > .grid-item-content {
            width: 100%;
            height: 100%;
            text-align: center;
            color: @grid-item-content-color;
            background-color: @grid-item-content-bg;
            // allow to position center and middle
            display: table-cell;
            vertical-align: middle;
            overflow-x: hidden;
            overflow-y: hidden;
            z-index: 0 !important;
            padding: @grid-item-content-padding;
            margin: @grid-item-content-margin;
        }
        // make grid rows
        .make-grid-rows(@grid-rows);
        // make grid columns
        .make-grid-columns(@grid-columns);
    }
    @media (max-width: 768px) {
        > .grid-item {
            position: relative !important;
            width: 100% !important;
            left: 0 !important;
            top: auto !important;
            margin-bottom: @grid-item-margin;
            max-width: none !important;
            min-width: 100% !important;
        }
    }
}
