.col-wrapper {
	overflow: auto;
	margin-left: -$globalPaddingS;

	@include responsive('>', 'phones', (
		margin-left: -$globalPadding
	));

	&.show {
		visibility: visible;
		height: auto;
	}
}

.col {
	float: left;
	width: 33.33%;
	padding-left: $globalPaddingS;

	@include responsive('>', 'phones', (
		padding-left: $globalPadding
	));

	@include responsive('<', 'tablets', (
		width: 50%
	));

	@include responsive('<', 'phones', (
		width: 100%
	));

	&.col-1-2 {
		width: 50%;
	}

	&.col-1-3 {
		width: 33.33%;
	}

	&.col-2-3 {
		width: 66.66%;
	}

	&.col-1-4 {
		width: 25%;
	}

	&.col-3-4 {
		width: 75%;
	}
}

.col-responsive {
	float: left;
	width: 100%;
	padding-left: $globalPaddingS;
	padding-bottom: $globalPadding;

	@include responsive('>', 630px, (
		padding-left: $globalPadding
	));

	&.col-6 {
		@include responsive('>', 630px, (
			width: 50%
		));
	}

	&.col-4 {
		@include responsive('>', 'phones', (
			width: 33.33%
		));
	}
}