.grid {
	background-color: #333;
}
.grid-sizer {
	width: 16.66667%;
}

.grid-item {
	width: 16.66667%;
	aspect-ratio: 6/8;
	background-color: maroon;
	box-sizing: border-box;
	color: #fff;
	display: flex;
	flex-direction: column-reverse;
	position: relative;
	text-decoration: none;
	overflow: hidden;
	visibility: hidden; /* hide by default */
	opacity: 0;
	transform: translateY(100px);
	transition: all .5s;
}
.grid.is-visible-items .grid-item { 
	visibility: visible; 
	opacity: 1;
	transform: translateY(0px);
}
.grid-item--width2 {
	width: 33.33333%;
	aspect-ratio: 12/8;
	box-sizing: border-box;
}
.grid-item--width3 {
	width: 50%;
	aspect-ratio: 18/8;
	box-sizing: border-box;
}
.grid-item--height2 {
	width: 16.66667%;
	aspect-ratio: 3/8;
	box-sizing: border-box;
}

.background-color-blue {
	background-color: var(--blue);
}
.background-color-teal {
	background-color: var(--teal);
}
.background-color-orange {
	background-color: var(--orange);
}
.background-color-darkorange {
	background-color: var(--darkorange);
}
.background-color-gray {
	background-color: var(--gray);
}
.background-color-purple {
	background-color: var(--purple);
}
.grid-item .iconcenter {
	height: 75%;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   align-content: center;
   position: absolute;
   top: 0;
   left: 0;
 }
.grid-item .iconcenter i {
    align-self: center;
    font-size: 4em;
	font-size: clamp(4em, 4vw, 8em);
    color: white;
}
/*a.grid-item.has_image:after {
	content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IlZUX1BQRV9Mb2dvIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwLjkgMTQ3LjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwMC45IDE0Ny41OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0VFNzYyMzt9Cjwvc3R5bGU+Cjxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iNzUuOCwzLjIgMCwxNDUuOCAyNS4xLDE0NS44IDEwMC45LDMuMiAiLz4KPC9zdmc+Cg==");
	width: 20px;
	height: 30px;
	font-size: 3rem;
	font-size: clamp(1em, 3vw, 3em);
	line-height: 1;
    transform-origin: top;
    position: absolute;
    top: 5rem;
    right: 3rem;
    opacity: 0;
    transition: all .5s;
 }

a.grid-item.has_image:hover:after {
    top: 0.4rem;
    right: 0.8rem;
    opacity: 1;
 }*/

.grid-item img, .grid-item video {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	object-fit: cover;
  width: 100%!important;
  height: 100%!important;
}
.grid-item p {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin: .8rem;
	font-family: sans-serif;
	font-size: 3rem;
	font-size: clamp(1.5rem, 3vw, 3rem);
    color: white;
    font-family: gineso-condensed,sans-serif;
}
.grid-item.has_image p {
	font-size: 1.6rem;
	font-size: clamp(1rem, 1.6vw, 1.6rem);
	text-transform: uppercase;
}
.grid-item.has_image p span {
	line-height: 1.4;
	background-color: #D16B1F;
	color: white;
}
.grid-item.has_image:hover p span {
	background-color: white;
	color: #D16B1F;
}

.grid-item p.citationtext {
	text-align: right;
	font-size: clamp(1rem, 1.6vw, 1.6rem);
	text-transform: none;
}
.grid-item p.quotetext {
	text-transform: none;
	font-size: clamp(1.2rem, 1.8vw, 1.8rem);
}
.grid-item .quotetext em {
	line-height: 1.4;
	background-color: white;
	color: inherit;
	padding-right: 0.2em;
}


@media all and (max-width: 768px) {
	/* Grid with 5 columns *
	.grid-sizer {
		width: 20%;
	}
	.grid-item, .grid-item--height2 {
		width: 20%;
	}
	.grid-item--width2 {
		width: 40%;
	}
	.grid-item--width3 {
		width: 60%;
	}
	* End Grid with 5 coumuns */

	/* Grid with 4 columns *
	.grid-sizer {
		width: 25%;
	}
	.grid-item, .grid-item--height2 {
		width: 25%;
	}
	.grid-item--width2 {
		width: 50%;
	}
	.grid-item--width3 {
		width: 75%;
	}
	/* End Grid with 4 coumuns */

	/* Grid with 3 columns */
/*	.grid-sizer {
		width: 33.333%;
	}
	.grid-item, .grid-item--height2 {
		width: 33.333%;
	}
	.grid-item--width2 {
		width: 66.667%;
	}
	.grid-item--width3 {
		width: 100%;
	}
	 End Grid with 3 coumuns 

	.grid-item--width2.mobile-single-col {
		width: 33.33333%;
		aspect-ratio: 6/8;
	}
	.grid-item--width3.mobile-double-col {
		width: 66.66667%;
		aspect-ratio: 12/8;
	}
*/	
	/* Grid with 2 columns */
	.grid-sizer {
		width: 50%;
	}
	.grid-item, .grid-item--height2 {
		width: 50%;
	}
	.grid-item--height2 {
		aspect-ratio: 6/8;
	}
	.grid-item--width2 {
		width: 100%;
	}
	.grid-item--width3 {
		width: 100%;
		aspect-ratio: 6/8;
	}
	/* End Grid with 3 coumuns */

	.grid-item--width2.mobile-single-col {
		width: 50%;
		aspect-ratio: 6/8;
	}
	.mobile-double-col, .grid-item--width2.mobile-double-col, .grid-item--width3.mobile-double-col {
		width: 100%;
		aspect-ratio: 12/8;

	}
	.grid-item p {
		font-size: clamp(2.5rem, 5vw, 5rem);
		margin-bottom: 1.2rem;
		line-height: 1.1;
	}
	.grid-item.has_image p {
		font-size: clamp(1.6rem, 3vw, 3rem);
		margin: .8rem;
		line-height: 1.4;
	}
}