.flexGrid {
	display: flex;
	column-gap: 0.5rem;
	align-items: stretch;
	margin: auto;
	flex-wrap: wrap;
	width: 100%;
}

.gridCard {
	transition: scale 0.4s var(--ease);
	overflow: hidden;
	position: relative;
	transform: scale(1);
	flex: 45%;
	padding: 0;
	margin-bottom: 0;
}

.contentFader {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 10rem;
	background-image: linear-gradient(to bottom, transparent, var(--darkest4) 100%);
}

.journalExternal { height: 100%; width: 100%; }
.external.journalExternal::after {
	position: absolute;
	top: 0.1rem;
	right: 0.1rem;
	left: unset;
	opacity: 0.5;
}

.gridCard a h1 {
	height: 100%;
	width: 100%;
	align-content: center;
	padding: 1rem;
}

@media (max-width: 800px) {
	.gridItem {
		flex: 100% !important;
	}
	.flexGrid {
		display: block;
	}
	.gridCard {
		padding: 0.5rem 0.2rem;
	}
}
@media (max-width: 750px) {
	.gridItem {
		flex: 100%;
	}
}

.gridCard .contentFader {
	height: 2rem;
}
.gridCard h1 {
	font-size: 1.5rem;
	margin: 0;
}
.gridCard:hover {
	scale: 0.99;
	transition: 0.4s var(--ease);
}
.gridCard:active {
	scale: 0.97;
}

.backgroundIcon::after {
	content: '';
	height: 50px;
	width: 50px;
	position: absolute;
	z-index: -1;
	left: 0.5rem;
	background-size: cover;
	top: 0.5rem;
	transform: rotateZ(-10deg);
	display: inline-block;
	background-image: var(--bg);
	filter: invert(50%) sepia(5%) saturate(2000%) hue-rotate(180deg) brightness(87%) blur(1px);
}

.gridCard.backgroundIcon::after {
	top: 0;
}