/* BASE GRID
 * ------------------------------------------------ */
.container {
	position: relative;
	width: $base-width;
	max-width: $grid-max-width;
	margin: 0 auto;
	padding: 0 relative(20px);
	box-sizing: border-box;
}
.column,
.columns {
	width: 100%;
	float: left;
	box-sizing: border-box;
}
.row {
    margin-top: 2.0833%;
    padding: 0 1.04165%;
    &:after {
        display: table;
        clear: both;
        content: '';
    }
}

@include grid($base-width, $is-fluid, $base-gutter-width, $base-col-count);

@media screen and (max-width: 768px) {
    .row { margin-top: 0; }
    .row [class*='column'] {
        width: 100%;
        margin-top: 2.0833%;
        margin-left: 0;
    }
}

/* CLEARING
 * ------------------------------------------------ */
.container:after {
	content: "\0020";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix, .row {
	zoom: 1;
	&:before, &:after {
		content: "\0020";
		display: block;
		overflow: hidden;
		visibility: hidden;
		width: 0;
		height: 0;
	}
	&:after { clear: both; }
}
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
