.columns {
    --gutter: 15px;
	display: flex;
	flex-wrap: wrap;
	row-gap: var(--gutter);
	column-gap: var(--gutter);
}
.columns > .column {
	flex: 1 0 0%;
}
.columns > *:not(.column) {
	/*flex: 0 1 auto;*/
    flex: 0 0 auto;
    width: calc(var(--width) / 12 * 100% - (1 - var(--width) / 12) * var(--gutter));
}

.column-12 {
	--width: 12;
}
.column-11 {
	--width: 11;
}
.column-10 {
	--width: 10;
}
.column-9 {
	--width: 9;
}
.column-8 {
	--width: 8;
}
.column-7 {
	--width: 7;
}
.column-6 {
	--width: 6;
}
.column-5 {
	--width: 5;
}
.column-4 {
	--width: 4;
}
.column-3 {
	--width: 3;
}
.column-2 {
	--width: 2;
}
.column-1 {
	--width: 1;
}

@media (min-width: 992px) {

	.laptop-12 {
		--width: 12;
	}
	.laptop-11 {
		--width: 11;
	}
	.laptop-10 {
		--width: 10;
	}
	.laptop-9 {
		--width: 9;
	}
	.laptop-8 {
		--width: 8;
	}
	.laptop-7 {
		--width: 7;
	}
	.laptop-6 {
		--width: 6;
	}
	.laptop-5 {
		--width: 5;
	}
	.laptop-4 {
		--width: 4;
	}
	.laptop-3 {
		--width: 3;
	}
	.laptop-2 {
		--width: 2;
	}
	.laptop-1 {
		--width: 1;
	}
}
@media(width < 768px) {

	[class*="column-"] {
		--width: 4;
		--width: 6;
	}
}
@media(width < 576px) {

	[class*="column-"] {
		--width: 12;
	}
}