@mixin col-width($media-size) {
	@for $i from 1 through 24 {
		.kt-col#{$media-size}-#{$i} {
			flex: none;
			width: (1/24 * $i * 100) * 1%;
		}
	}
}

@for $i from 1 through 24 {
	.kt-col-offset-#{$i} {
		margin-left: (1 / 24 * $i * 100) * 1%;
	}
	.kt-col-pull-#{$i} {
		position: relative;
		right: (1 / 24 * $i * 100) * 1%;
	}
	.kt-col-push-#{$i} {
		position: relative;
		left: (1 / 24 * $i * 100) * 1%;
	}
}

.kt-col {
	float: left;
	box-sizing: border-box;
}

@include col-width('');
@media (max-width: $size-xl) {
	@include col-width('-xl');
}
@media (max-width: $size-lg) {
	@include col-width('-lg');
}
@media (max-width: $size-md) {
	@include col-width('-md');
}
@media (max-width: $size-sm) {
	@include col-width('-sm');
}
@media (max-width: $size-xs) {
	@include col-width('-xs');
}

.kt-row {
	position: relative;
	box-sizing: border-box;
	clear: both;
	display: flex;
	flex-wrap: wrap;

	&::before,
	&::after {
		clear: both;
	}

	&--justify-center {
		justify-content: center;
	}

	&--justify-end {
		justify-content: flex-end;
	}

	&--align-center {
		align-items: center;
	}

	&--align-bottom {
		align-items: baseline;
	}
}