.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 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 (width > 576px) {

	.phone-12 {
		--width: 12;
	}
	.phone-11 {
		--width: 11;
	}
	.phone-10 {
		--width: 10;
	}
	.phone-9 {
		--width: 9;
	}
	.phone-8 {
		--width: 8;
	}
	.phone-7 {
		--width: 7;
	}
	.phone-6 {
		--width: 6;
	}
	.phone-5 {
		--width: 5;
	}
	.phone-4 {
		--width: 4;
	}
	.phone-3 {
		--width: 3;
	}
	.phone-2 {
		--width: 2;
	}
	.phone-1 {
		--width: 1;
	}
}
@media (width > 768px) {
	
	.tablet-12 {
		--width: 12;
	}
	.tablet-11 {
		--width: 11;
	}
	.tablet-10 {
		--width: 10;
	}
	.tablet-9 {
		--width: 9;
	}
	.tablet-8 {
		--width: 8;
	}
	.tablet-7 {
		--width: 7;
	}
	.tablet-6 {
		--width: 6;
	}
	.tablet-5 {
		--width: 5;
	}
	.tablet-4 {
		--width: 4;
	}
	.tablet-3 {
		--width: 3;
	}
	.tablet-2 {
		--width: 2;
	}
	.tablet-1 {
		--width: 1;
	}
}
@media (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 > 1200px) {

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