/*--------------------------------------------------*/
/*	GRID TILES
/*--------------------------------------------------*/

.grid-1-4,
.grid-1-3,
.grid-1-2,
.grid-2-4,
.grid-2-2 {
	width: 100%;
}

@supports (display: grid) {
	.grid-1-4,
	.grid-1-3,
	.grid-1-2,
	.grid-2-4,
	.grid-2-2 {
		display: grid;
		grid-gap: 15px;
	}

	@media screen and (min-width: 700px) {
		.grid-1-4,
		.grid-2-4 {
			grid-template-columns: repeat(4, 1fr);
		}

		.grid-1-3 {
			grid-template-columns: repeat(3, 1fr);
		}

		.grid-1-2,
		.grid-2-2 {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media screen and (max-width: 700px) {
		.grid-1-4,
		.grid-1-3,
		.grid-1-2,
		.grid-2-4,
		.grid-2-2 {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media screen and (max-width: 500px) {
		.grid-1-4,
		.grid-1-3,
		.grid-1-2 {
			grid-template-columns: repeat(1, 1fr);
		}
	}
}

@supports not (display: grid) {
	.grid-1-4,
	.grid-1-3,
	.grid-1-2,
	.grid-2-4,
	.grid-2-2 {
		display: block;
		width: 100%;
	}

	.grid-1-4 > *,
	.grid-1-3 > *,
	.grid-1-2 > *,
	.grid-2-4 > *,
	.grid-2-2 > * {
		float: left;
	}

	@media screen and (min-width: 700px) {
		.grid-1-4 > *,
		.grid-2-4 > * {
			width: calc(25% - 12px);
		}

		.grid-1-3 > * {
			width: calc(33% - 8px);
		}

		.grid-1-2 > *,
		.grid-2-2 > * {
			width: calc(50% - 8px);
		}

		.grid-1-4 > *,
		.grid-1-3 > *,
		.grid-1-2 > *,
		.grid-2-4 > *,
		.grid-2-2 > * {
			margin-right: 15px;
		}

		.grid-1-4 > *:nth-child(4n),
		.grid-2-4 > *:nth-child(4n),
		.grid-1-3 > *:nth-child(3n),
		.grid-1-2 > *:nth-child(2n),
		.grid-2-2 > *:nth-child(2n) {
			margin-right: 0;
		}

		.grid-1-4 > *:nth-child(n+5),
		.grid-2-4 > *:nth-child(n+5),
		.grid-1-3 > *:nth-child(n+4),
		.grid-1-2 > *:nth-child(n+3),
		.grid-2-2 > *:nth-child(n+3) {
			margin-top: 15px;
		}
	}

	@media screen and (max-width: 700px) {
		.grid-1-4 > *,
		.grid-1-3 > *,
		.grid-1-2 > *,
		.grid-2-4 > *,
		.grid-2-2 > * {
			width: calc(50% - 8px);
		}

		.grid-1-4 > *,
		.grid-1-3 > *,
		.grid-1-2 > *,
		.grid-2-4 > *,
		.grid-2-2 > * {
			margin-right: 15px;
		}

		.grid-1-4 > *:nth-child(2n),
		.grid-1-3 > *:nth-child(2n),
		.grid-1-2 > *:nth-child(2n),
		.grid-2-4 > *:nth-child(2n),
		.grid-2-2 > *:nth-child(2n) {
			margin-right: 0;
		}

		.grid-1-4 > *:nth-child(n+3),
		.grid-1-3 > *:nth-child(n+3),
		.grid-1-2 > *:nth-child(n+3),
		.grid-2-4 > *:nth-child(n+3),
		.grid-2-2 > *:nth-child(n+3) {
			margin-top: 15px;
		}
	}

	@media screen and (max-width: 500px) {
		.grid-1-4 > *,
		.grid-1-3 > *,
		.grid-1-2 > * {
			width: 100%;
		}

		.grid-1-4 > *:nth-child(n+2),
		.grid-1-3 > *:nth-child(n+2),
		.grid-1-2 > *:nth-child(n+2) {
			margin-top: 15px;
		}
	}
}