.blog,
.events,
.newsletter {
	margin: 0 auto 4rem;
	padding: 0 2rem;
	max-width: 100%;
}

@media screen and (min-width: 60rem) {
	.blog,
	.events,
	.newsletter {
		margin-bottom: 6rem;
	}
}

@media screen and (min-width: 80rem) {
	.blog,
	.events,
	.newsletter {
		margin-bottom: 8rem;
		width: var(--content-w-wide);
	}
}

/* Posts */

.grid_posts {
	display: grid;
	gap: 2rem;
	margin-top: 2rem;
}

@media (min-width: 350px) {
	.grid_posts {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		grid-template-rows: masonry;
		masonry-auto-flow: ordered;
	}
}
.postPreview {
	box-shadow: 0 10px 10px var(--color-gray-5);
}

.postPreview:nth-child(3n - 2) {
	background-color: var(--color-one);
}

.postPreview:nth-child(3n - 1) {
	background-color: var(--color-two);
}

.postPreview:nth-child(3n) {
	background-color: var(--color-three);
}

.postPreview .featuredImage img {
	aspect-ratio: var(--aspect-ratio);
	display: block;
	object-fit: cover;
}

.postPreview .title {
	font-size: 1em;
	line-height: 1.4;
	margin: 0;
	padding: 1rem 1rem 0;
}

.postPreview .metadata {
	font-size: 0.75em;
	padding: 0 1rem 1rem;
	text-decoration: none;
}

.postPreview a .metadata {
	text-decoration: none;
}

.postPreview:nth-child(3n - 2) a {
	text-decoration-color: var(--color-three);
}

.postPreview:nth-child(3n - 2) a:focus {
	outline-color: var(--color-three);
}

.postPreview:nth-child(3n - 1) a {
	text-decoration-color: var(--color-one);
}

.postPreview:nth-child(3n - 1) a:focus {
	outline-color: var(--color-one);
}

.postPreview:nth-child(3n) a {
	text-decoration-color: var(--color-two);
}

.postPreview:nth-child(3n) a:focus {
	outline-color: var(--color-two);
}

.postPreview a:hover,
.postPreview a:focus {
	color: var(--color-gray-0);
	text-decoration-color: var(--color-gray-0);
}

.postPreview a:focus {
	outline-offset: 0;
}

/* Hero */

.heroHeader {
	margin-bottom: 4rem;
}

@media screen and (min-width: 60rem) {
	.heroHeader {
		margin-bottom: 6rem;
	}
}

@media screen and (min-width: 80rem) {
	.heroHeader {
		margin-bottom: 8rem;
	}
}

.heroHeader .title,
.heroHeader .content,
.heroHeader .linkContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding: 0 2rem;
}

@media screen and (min-width: 80rem) {
	.heroHeader .title,
	.heroHeader .content,
	.heroHeader .linkContainer {
		width: var(--content-w-wide);
		max-width: 100%;
	}
}

.heroHeader .content,
.heroHeader .linkContainer {
	font-size: 1.25em;
	margin-top: 1em;
}

.heroHeader .heroImage {
	align-items: center;
	display: flex;
	height: 56.25vw;
	margin-top: 2rem;
	overflow: hidden;
}

/* .heroHeader .heroImage img {
	width: 100%;
} */

.heroImageOverlay {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	margin-top: 4rem;
}

.heroImageOverlay .imageTextOverlay {
	align-items: center;
	aspect-ratio: 16/9;
	display: flex;
	justify-content: center;
	overflow: hidden;
	position: relative;
	max-width: 100%;
}

.heroImageOverlay .imageTextOverlay picture,
.heroImageOverlay .imageTextOverlay img {
	display: flex;
	filter: blur(2px) contrast(1);
	height: 100%;
	object-fit: cover;
	transition: all 0.3s ease-in-out;
	max-width: 100%;
}

.heroImageOverlay .imageTextOverlay:hover picture,
.heroImageOverlay .imageTextOverlay:hover img {
	transform: scale(1.2);
	filter: blur(0) contrast(1.2);
}

.heroImageOverlay .imageTextOverlay a {
	align-items: center;
	box-sizing: border-box;
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	font-size: 2em;
	height: 100%;
	top: 0;
	justify-content: center;
	left: 0;
	margin: 0;
	padding: 1rem;
	position: absolute;
	text-align: center;
	text-decoration: none;
	width: 100%;
}

.heroImageOverlay .imageTextOverlay.orange a {
	background: rgba(var(--color-one-r), var(--color-one-g), var(--color-one-b), 0.8);
}

.heroImageOverlay .imageTextOverlay.blue a {
	background: rgba(var(--color-three-r), var(--color-three-g), var(--color-three-b), 0.8);
}

/* Newsletter form */

.newsletter_form {
	background-color: var(--color-gray-2);
	margin-top: 2rem;
	padding: 2rem;
}

.invisible {
	display: none;
}

.hidden {
	position: absolute;
	left: -5000px;
}