@import '/core/css/import.less';

.columnContent {
    background: var(--mtc_blue);
    text-align: center;
    color: #fff;
    padding: var(--gutter_width);
}

.sideBar {

    @media @desktop, @tablet {
        .col(8);
    }

    @media @mobile {
        .col(@column_count);
    }
}

.mainContent {
    .col(16);

    @media @mobile {
        .col(@column_count);
    }
}

.gridThirdColGroup {

    .gridThird {

        @media all
        and (max-width: 900px) {
            width: 100%;
        }
    }
}

.gridQuarterColGroup {

    .gridQuarter {

        @media @tablet, @mobile {
            .col(12);
        }
    }
}

.fourWide {

    .gridItem {

        @media @desktop {
            .grid(4);
        }

        @media @tablet {
            .grid(2);
        }

        @media @mobile {
            .grid(1);
        }
    }
}

.threeWide {

    .gridItem {

        @media @tablet, @desktop {
            .grid(3);
        }

        @media @mobile {
            .grid(1);
        }
    }
}

.twoWide {

    .gridItem {

        @media @tablet, @desktop {
            .grid(2);
        }

        @media @mobile {
            .grid(1);
        }
    }
}

.fullGridExample {

    .desktop, .tablet, .mobile {
        display: none;
    }

    .desktop {

        @media @desktop {
            display: block;
        }
    }

    .tablet {

        @media @tablet {
            display: block;
        }
    }

    .mobile {

        @media @mobile {
            display: block;
        }
    }
}
