/*
 * gridded.css v0.07
 */


	/* very minimal reset */

	* {
		box-sizing: border-box;
		margin: 0; padding: 0;
	}

	img, video { 
		height: auto;
		max-width: 100%;
	}

	/* use .gridded on main container */
	.gridded {
		display: grid;
		grid-auto-rows: minmax(5vh, max-content); 	/* 5vh = 20 rows. the minmax() is to avoid truncating text content at a set height - we are unlikely to want that */
	}

	/* use .inner-grid for grids inside grids
	   -- it only specifies columns, not row heights */
	.inner-grid {
		display: grid;
	}

	/* opt in to 'dense' (fill gaps) grid mode */
	.dense {
		grid-auto-flow: dense;
	}

	@media (min-width: 900px) {
		.gridded, .inner-grid {
			grid-template-columns: repeat(12, 1fr); 
		}
		.col-1 {
			grid-column-end: span 1; 
		}
		.col-2 {
			grid-column-end: span 2; 
		}
		.col-3 {
			grid-column-end: span 3; 
		}
		.col-4 {
			grid-column-end: span 4; 
		}
		.col-5 {
			grid-column-end: span 5; 
		}
		.col-6 {
			grid-column-end: span 6; 
		}
		.col-7 {
			grid-column-end: span 7; 
		}
		.col-8 {
			grid-column-end: span 8; 
		}
		.col-9 {
			grid-column-end: span 9; 
		}
		.col-10 {
			grid-column-end: span 10; 
		}
		.col-11 {
			grid-column-end: span 11; 
		}
		.col-12 {
			grid-column-end: span 12; 
		}

		/* these usually require a 'dense' grid */
		/* you can break the grid with this if the 'start' is too high for your column's span width */
		.col-start-1 {
			grid-column-start: 1;
		}
		.col-start-2 {
			grid-column-start: 2;
		}
		.col-start-3 {
			grid-column-start: 3;
		}
		.col-start-4 {
			grid-column-start: 4;
		}
		.col-start-5 {
			grid-column-start: 5;
		}
		.col-start-6 {
			grid-column-start: 6;
		}
		.col-start-7 {
			grid-column-start: 7;
		}
		.col-start-8 {
			grid-column-start: 8;
		}
		.col-start-9 {
			grid-column-start: 9;
		}
		.col-start-10 {
			grid-column-start: 10;
		}
		.col-start-11 {
			grid-column-start: 11;
		}
		.col-start-12 {
			grid-column-start: 12;
		}
	
	}


	.gridded img {
		max-width: 100%;
		height: auto;
	}

	.gap-1 {
		gap: 5px;
	}
	.gap-2 {
		gap: 10px;
	}
	.gap-3 {
		gap: 15px;
	}
	.gap-4 {
		gap: 20px;
	}
	.gap-5 {
		gap: 25px;
	}

	@media (min-width: 900px) {
		.gap-1 {
			gap: 10px;
		}
		.gap-2 {
			gap: 20px;
		}
		.gap-3 {
			gap: 30px;
		}
		.gap-4 {
			gap: 40px;
		}
		.gap-5 {
			gap: 50px;
		}
	}

	.pad-1 {
		padding: 0.5rem;
	}
	.pad-2 {
		padding: 1rem;
	}
	.pad-3 {
		padding: 1.5rem;
	}
	.pad-4 {
		padding: 2rem;
	}
	.pad-5 {
		padding: 2.5rem;
	}

	@media (min-width: 900px) {
		.pad-1 {
			padding: 1rem;
		}
		.pad-2 {
			padding: 2rem;
		}
		.pad-3 {
			padding: 3rem;
		}
		.pad-4 {
			padding: 4rem;
		}
		.pad-5 {
			padding: 5rem;
		}
	}


	.row-1 {
		grid-row: span 1;
	}
	.row-2 {
		grid-row: span 2;
	}
	.row-3 {
		grid-row: span 3;
	}
	.row-4 {
		grid-row: span 4;
	}
	.row-5 {
		grid-row: span 5;
	}
	.row-6 {
		grid-row: span 6;
	}
	.row-7 {
		grid-row: span 7;
	}
	.row-8 {
		grid-row: span 8;
	}
	.row-9 {
		grid-row: span 9;
	}
	.row-10 {
		grid-row: span 10;
	}
	.row-11 {
		grid-row: span 11;
	}
	.row-12 {
		grid-row: span 12;
	}
	.row-13 {
		grid-row: span 13;
	}
	.row-14 {
		grid-row: span 14;
	}
	.row-15 {
		grid-row: span 15;
	}
	.row-16 {
		grid-row: span 16;
	}
	.row-17 {
		grid-row: span 17;
	}
	.row-18 {
		grid-row: span 18;
	}
	.row-19 {
		grid-row: span 19;
	}
	.row-20 {
		grid-row: span 20;
	}

	/* no collapse mode (ie preserve grid on mobile) */
	
	.gridded-no-collapse {
		display: grid; 
		grid-template-columns: repeat(12, 1fr); 
	}

	.gridded-no-collapse > .col-1 {
		grid-column-end: span 1; 
	}
	.gridded-no-collapse > .col-2 {
		grid-column-end: span 2; 
	}
	.gridded-no-collapse > .col-3 {
		grid-column-end: span 3; 
	}
	.gridded-no-collapse > .col-4 {
		grid-column-end: span 4; 
	}
	.gridded-no-collapse > .col-5 {
		grid-column-end: span 5; 
	}
	.gridded-no-collapse > .col-6 {
		grid-column-end: span 6; 
	}
	.gridded-no-collapse > .col-7 {
		grid-column-end: span 7; 
	}
	.gridded-no-collapse > .col-8 {
		grid-column-end: span 8; 
	}
	.gridded-no-collapse > .col-9 {
		grid-column-end: span 9; 
	}
	.gridded-no-collapse > .col-10 {
		grid-column-end: span 10; 
	}
	.gridded-no-collapse > .col-11 {
		grid-column-end: span 11; 
	}
	.gridded-no-collapse > .col-12 {
		grid-column-end: span 12; 
	}

	.gridded-no-collapse > .col-start-1 {
		grid-column-start: 1;
	}
	.gridded-no-collapse > .col-start-2 {
		grid-column-start: 2;
	}
	.gridded-no-collapse > .col-start-3 {
		grid-column-start: 3;
	}
	.gridded-no-collapse > .col-start-4 {
		grid-column-start: 4;
	}
	.gridded-no-collapse > .col-start-5 {
		grid-column-start: 5;
	}
	.gridded-no-collapse > .col-start-6 {
		grid-column-start: 6;
	}
	.gridded-no-collapse > .col-start-7 {
		grid-column-start: 7;
	}
	.gridded-no-collapse > .col-start-8 {
		grid-column-start: 8;
	}
	.gridded-no-collapse > .col-start-9 {
		grid-column-start: 9;
	}
	.gridded-no-collapse > .col-start-10 {
		grid-column-start: 10;
	}
	.gridded-no-collapse > .col-start-11 {
		grid-column-start: 11;
	}
	.gridded-no-collapse > .col-start-12 {
		grid-column-start: 12;
	}


	/* alignment utilities */

	.center-content-vertical {
		display: grid;
		align-content: center;
	}

	.center-content-horizontal {
		/* not used yet */
		display: grid;
		justify-content: center;
	}

	/* put two child divs as children of this element - one will align top, the other will align bottom */
	.align-top-bottom {
		display: grid;
		align-content: space-between;
	}

	/* this should be set on the image container, not img tag */
	.fill-with-image {
		overflow: hidden;
		position: relative;		/* allows text to be positioned over image */
	}
	.fill-with-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 70%;
		max-width: initial;	/* turn off 100% */
	}

	.text-center {
		text-align: center;
	}