$display-break-1: 700px;
$display-break-2: 900px;
$display-break-3: 1200px;
$display-break-4: 1600px;
$display-break-5: 1800px;

%grid-base {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 2fr;

	.grid-cell-1 {
		grid-column-start: 1;
		grid-row-start: 2;
		padding: 0;
		align-self: self-start;
		justify-self: self-start;
	}

	.grid-cell-2 {
		grid-column-start: 1;
		grid-row-start: 1;
		padding: 0;
		align-self: self-start;
		justify-self: self-start;
	}

	.grid-cell-width-100 {
		width: 100%;
	}

	// X-axis alignment
	.grid-cell-left {
		justify-self: self-start !important;
	}
	.grid-cell-right {
		justify-self: self-end !important;
	}
	.grid-cell-center {
		justify-self: center !important;
	}

	// Y-axis alignment
	.grid-cell-top {
		align-self: self-start !important;
	}
	.grid-cell-middle {
		align-self: center !important;
	}
	.grid-cell-bottom {
		align-self: self-end !important;
	}
}

.grid-container-8-2 {
	@extend %grid-base;

	@media (min-width: $display-break-2) {
		grid-template-columns: 8fr 2fr;
		grid-template-rows: 1fr;

		.grid-cell-1 {
			grid-column-start: 1;
			grid-row-start: 1;
			padding: 0;
		}

		.grid-cell-2 {
			grid-column-start: 2;
			grid-row-start: 1;
			padding: 0;
		}
	}
}

.grid-container-6-4 {
	@extend %grid-base;

	@media (min-width: $display-break-2) {
		grid-template-columns: 6fr 4fr;
		grid-template-rows: 1fr;

		.grid-cell-1 {
			grid-column-start: 1;
			grid-row-start: 1;
			padding: 0;
		}

		.grid-cell-2 {
			grid-column-start: 2;
			grid-row-start: 1;
			padding: 0;
			justify-self: self-end;
		}
	}
}

.grid-container-5-5 {
	@extend %grid-base;

	@media (min-width: $display-break-2) {
		grid-template-columns: 5fr 5fr;
		grid-template-rows: 1fr;

		.grid-cell-1 {
			grid-column-start: 1;
			grid-row-start: 1;
			padding: 0;
		}

		.grid-cell-2 {
			grid-column-start: 2;
			grid-row-start: 1;
			padding: 0;
			justify-self: self-end;
		}
	}
}