.cl-col {
	width: 100%;
	box-sizing: border-box;

	&::before {
		content: '';
		display: block;
	}
}

[class*='cl-col-'] {
	float: left;
	box-sizing: border-box;
}

.cl-col-0 {
	display: none;
	width: 0%;
}

@for $i from 1 through 24 {
	.cl-col-push-#{$i},
	.cl-col-pull-#{$i} {
		position: relative;
	}
}

@for $i from 1 through 24 {
	.cl-col-#{$i} {
		width: 100% / 24 * $i;
	}

	.cl-col-offset-#{$i} {
		margin-left: 100% / 24 * $i;
	}

	.cl-col-pull-#{$i} {
		right: 100% / 24 * $i;
	}

	.cl-col-push-#{$i} {
		left: 100% / 24 * $i;
	}
}