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


	// stack columns
	@include media-breakpoint-down (sm) {
		&[data-stack*="mobile"] {
			display: flex !important;
			flex-direction: column;
		}
	}

	@include media-breakpoint-only (md) {
		&[data-stack*="tablet"] {
			display: flex !important;
			flex-direction: column;
		}
	}
}