.grid-columns {

	&[data-columns="2"] {
		grid-template-columns: repeat(2, 1fr);
	}

	&[data-columns="3"] {
		grid-template-columns: repeat(3, 1fr);
	}

	&[data-columns="4"] {
		grid-template-columns: repeat(4, 1fr);
	}


	// special columns
	&[data-columns="2-1"] {
		grid-template-columns: repeat(4, 1fr);

		> * {
			&:nth-child(1), &:nth-child(2) {
				grid-column: span 1;
			}

			&:nth-child(3) {
				grid-column: span 2;
			}
		}
	}

	&[data-columns="1-2"] {
		grid-template-columns: repeat(4, 1fr);

		> * {
			&:nth-child(1) {
				grid-column: span 2;
			}

			&:nth-child(2), &:nth-child(3) {
				grid-column: span 1;
			}
		}
	}

	> * {
		min-width: 0;
	}
}