.row {
	clear: both;

	&:after {
		.clear
	}

	.row {
		margin-left: -@colGutter / 2;
		margin-right: -@colGutter / 2;
	}

	[class^="@{colName}"] {
		display: block;
		min-height: 1px;
		padding-left: @colGutter / 2;
		padding-right: @colGutter / 2;

		&.no-left-gutter {
			padding-left: 0;
		}
		&.no-right-gutter {
			padding-right: 0;
		}
		&.no-gutter {
			padding-left: 0;
			padding-right: 0;
		}
	}

	// Build a row of columns
	.makeRow(@spanName) {
		@colWidth: percentage((100 / @numColumns) / 100);

		[class*="@{colName}@{spanName}"] {
			float: left;
		}
		[class*="@{colName}@{spanName}@{separator}"] {
			position: relative;
		}

		.makeCols(@name, @span) when (@span > 0) {
			.@{colName}@{name}@{span} {
				width: @colWidth + (@colWidth * (@span - 1));
			}
			.@{offsetName}@{name}@{span} {
				margin-left: @colWidth * @span;
			}
			.@{colName}@{name}@{separator}push@{span} {
				left: @colWidth + (@colWidth * (@span - 1));
			}
			.@{colName}@{name}@{separator}pull@{span} {
				right: @colWidth + (@colWidth * (@span - 1));
			}
			.makeCols(@name, @span - 1);
		}

		.@{colName}@{spanName}@{separator}push0 {
			left: inherit;
		}
		.@{colName}@{spanName}@{separator}pull0 {
			right: inherit;
		}

		.makeCols(@spanName, @numColumns);

		// Make columns equal height needs IE10+
		&.@{colName}@{spanName}@{separator}equal-height {
			display: -webkit-box;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
		}
	}

	.makeRow(@tinyName);

	@media (min-width: @breakpoint-s) {
		.makeRow(@smallName);
	}

	@media (min-width: @breakpoint-m) {
		.makeRow(@mediumName);
	}

	@media (min-width: @breakpoint-l) {
		.makeRow(@largeName);
	}
}
