.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) {*/

.columns > [class*="column-"] {
	/*flex: 0 1 auto;*/
	--width: 12;
    flex: 0 0 auto;
    width: calc(var(--width) / 12 * 100% - (1 - var(--width) / 12) * var(--gutter));
}

@media(width > 576px) {

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

@media(width > 768px) {

	.columns > [class*="column-"] {
		--width: 6;
	}
}

@media (width > 992px) {

	.columns {
		.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;
		}
	}
}