@mixin govuk-grid {
    @include govuk-h-clearfix;
    margin-right: - ($govuk-gutter-half);
    margin-left: - ($govuk-gutter-half);
}

@mixin govuk-grid-item {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 $govuk-gutter-half;

    @include mq($from: tablet) {
        float: left;
    }
}

@include govuk-exports("grid") {

    .govuk-o-grid {
        margin-right: -15px;
        margin-left: -15px;
        @include govuk-grid;
    }

    .govuk-o-grid__item {
        @include govuk-grid-item;
    }

    .govuk-o-grid__item--full {
        width: 100%;
    }

    .govuk-o-grid__item--one-half {
        @include mq($from: tablet) {
            width: percentage(1 / 2);
        }
    }

    .govuk-o-grid__item--one-third {
        @include mq($from: tablet) {
            width: percentage(1 / 3);
        }
    }

    .govuk-o-grid__item--two-thirds {
        @include mq($from: tablet) {
            width: percentage(2 / 3);
        }
    }

    .govuk-o-grid__item--one-quarter {
        @include mq($from: tablet) {
            width: percentage(1 / 4);
        }
    }
}