.grid {
    margin-left: @content-offset;
    margin-right: @content-offset;
    width: ~"calc(100% - 30px)";
    max-width: 1160px;
    margin: 0 auto;
}

.grid-full {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
}

.grid,
.grid-full {
    [class*="col-"] {
        margin-left: @content-offset-inner;
        margin-right: @content-offset-inner;
        display: inline-block;
        vertical-align: top;
    }
}

@media @screen-xs-max {
    .grid-full-xs {
        margin-left: 0;
        margin-right: 0;
        width: 100%;

        [class*="col-"] {
            margin-left: 0;
            margin-right: 0;
            width: 100%;
        }
    }
}

.col-third {
    width: calc(33.3333% ~"-" @content-offset-inner * 2);
}

.col-two-third {
    width: calc(66.6667% ~"-" @content-offset-inner * 2);
}

.col-half {
    width: calc(50% ~"-" @content-offset-inner * 2);
}

.col-quarter {
    width: calc(25% ~"-" @content-offset-inner * 2);
}

.col-full {
    width: calc(100% ~"-" @content-offset-inner * 2);
}

@media @screen-xs-max {
    .col-quarter,
    .col-third,
    .col-two-third,
    .col-half {
        width: calc(100% ~"-" @content-offset-inner * 2);
    }
}