/* JGD Material Design Grid */

/**
 * The element (div/section/article) that has .jgd-grid-wrap attached must be wrapped around the elements that have the ".column-" classes in order for flexbox to work.
 */
.jgd-grid-wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.jgd-grid {
	box-sizing: border-box;
	padding: 0 0.5em;
	width: 100%;
}

/* Maximum of four columns for mobile */
.jgd-column-1,
.jgd-columns-2,
.jgd-columns-3,
.jgd-columns-4,
.jgd-columns-5,
.jgd-columns-6,
.jgd-columns-7,
.jgd-columns-8,
.one-half-centered-r,
.three-fourths-centered-r,
.two-thirds-centered-r,
.two-by-two-centered-r {
	margin: 0 1%; /* fallback for browsers that don't support calc */
	margin: 0 0.5em;
}
.jgd-column-1,
.jgd-columns-2,
.jgd-columns-3,
.jgd-columns-4,
.jgd-columns-5,
.jgd-columns-6,
.jgd-columns-7,
.jgd-columns-8,
.one-half-centered,
.one-half-centered-r,
.three-fourths-centered,
.three-fourths-centered-r,
.two-thirds-centered,
.two-thirds-centered-r,
.two-by-two-centered,
.two-by-two-centered-r {
	box-sizing: border-box;
	padding: 1em;
	/*background-color: #e0e0e0;*/ /* for testing */
}
.jgd-column-1,
.one-half-centered-r,
.three-fourths-centered-r,
.two-thirds-centered-r,
.two-by-two-centered-r {
	width: 98%; /* fallback for browsers that don't support calc */
	width: calc(100% - 1em);
}
.jgd-columns-2 {
	width: 48%;
	width: calc(50% - 1em);
}
.jgd-columns-3 {
	width: 31.33%;
	width: calc(33.33% - 1em);
}
.jgd-columns-4 {
	width: 23%;
	width: calc(25% - 1em);
}

@media (min-width: 37.5em) { /* ~600px; Maximum of eight columns for tablets */
	.jgd-columns-5 {
		width: 18%;
		width: calc(20% - 1em);
	}
	.jgd-columns-6 {
		width: 14.66%;
		width: calc(16.66% - 1em);
	}
	.jgd-columns-7 {
		width: 12.29%;
		width: calc(14.29% - 1em);
	}
	.jgd-columns-8 {
		width: 10.5%;
		width: calc(12.5% - 1em);
	}
}

@media (min-width: 45em) { /* ~720px; These classes work best for large tablets+ */
	.one-half-centered,
	.one-half-centered-r {
		width: 48%;
		width: calc(50% - 1em);
		margin: 0 25% 0 25%;
	}
	.three-fourths-centered,
	.three-fourths-centered-r,
	.two-by-two-centered-r {
		width: 73%;
		width: calc(75% - 1em);
		margin: 0 12.5% 0 12.5%;
	}
	.two-thirds-centered,
	.two-thirds-centered-r {
		width: 64.66%;
		width: calc(66.66% - 1em);
		margin: 0 16.66% 0 16.66%;
	}
}

@media (min-width: 52.5em) { /* ~840px; Maximum of twelve columns for desktop */
	.jgd-grid {
		padding: 0 0.75em;
	}
	.jgd-column-1,
	.jgd-columns-2,
	.jgd-columns-3,
	.jgd-columns-4,
	.jgd-columns-5,
	.jgd-columns-6,
	.jgd-columns-7,
	.jgd-columns-8 {
		margin: 0 0.75em;
	}
	.jgd-column-1,
	.jgd-columns-2,
	.jgd-columns-3,
	.jgd-columns-4,
	.jgd-columns-5,
	.jgd-columns-6,
	.jgd-columns-7,
	.jgd-columns-8,
	.one-half-centered,
	.one-half-centered-r
	.three-fourths-centered,
	.three-fourths-centered-r
	.two-thirds-centered,
	.two-thirds-centered-r {
		padding: 1.5em;
	}
	.jgd-column-1 {
		width: calc(100% - 1.5em);
	}
	.jgd-columns-2 {
		width: calc(50% - 1.5em);
	}
	.jgd-columns-3 {
		width: calc(33.33% - 1.5em);
	}
	.jgd-columns-4 {
		width: calc(25% - 1.5em);
	}
	.jgd-columns-5 {
		width: calc(20% - 1.5em);
	}
	.jgd-columns-6 {
		width: calc(16.66% - 1.5em);
	}
	.jgd-columns-7 {
		width: calc(14.29% - 1.5em);
	}
	.jgd-columns-8 {
		width: calc(12.5% - 1.5em);
	}
	.jgd-columns-9 {
		width: 9.11%;
		width: calc(11.11% - 1.5em);
	}
	.jgd-columns-10 {
		width: 8%;
		width: calc(10% - 1.5em);
	}
	.jgd-columns-11 {
		width: 7.09%;
		width: calc(9.09% - 1.5em);
	}
	.jgd-columns-12 {
		width: 6.33%;
		width: calc(8.33% - 1.5em);
	}
	.one-half-centered,
	.one-half-centered-r {
		width: calc(50% - 1.5em);
	}
	.three-fourths-centered,
	.three-fourths-centered-r,
	.two-by-two-centered-r {
		width: calc(75% - 1.5em);
	}
	.two-thirds-centered,
	.two-thirds-centered-r {
		width: calc(66.66% - 1.5em);
	}
}

@media (min-width: 80em) { /* ~1280px */
	.two-by-two-centered,
	.two-by-two-centered-r {
		margin: 0 0.75em;
		padding: 1.5em;
		width: 48%;
		width: calc(50% - 1.5em);
	}
}