.acf_section--news_teaser {
	background: var(--color-light-grey);
}

.news_post_container {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	gap: 0 var(--universal-gap);
	margin-top: calc(var(--universal-gap) * 2);
}

.archive_news_return {
	margin: 0 auto;
}

.news__post:first-of-type {
	grid-column-end: span 6;
	grid-row: 1/999;
	align-self: stretch;
	position: relative;
}

.news__post:first-of-type .news__hero {
	order: 0 !important;
}

.news__hero {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	aspect-ratio: 16/9;
	overflow: hidden;
}

.news__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.news__post {
	grid-column-end: span 3;
	display: inline-grid;
	margin-bottom: var(--universal-gap);
}

.news__post:first-of-type .news__content {
	position: sticky;
	top: calc(var(--header-height) + var(--wrapper-padding));
	left: 0;
	height: fit-content;
	min-height: 0;
}

.news__content {
	display: grid;
	background-color: var(--color-white);
	height: 100%;
	min-height: 100%;
}

.news__post:nth-of-type(2n) .news__content {
	align-content: space-between;
}

.news__post:nth-of-type(2n) .news__hero {
	order: 2;
}

.news__title {
	margin: calc(var(--universal-gap) / 2) 0;
}

.news__desc {
	padding: var(--universal-gap);
}

.news__date,
.news__teaser {
	font-weight: var(--fw-normal);
}

.news__link {
	display: block;
}

.news__link:hover,
.news__link:active,
.news__link:focus {
	text-decoration: none;
}

.news__link:hover .news__image,
.news__link:active .news__image,
.news__link:focus .news__image {
	transform: scale(1.15);
}

.news__fill_box {
	width: 100%;
	height: 100%;
	aspect-ratio: 16/9;
}

.news__post:nth-of-type(2n) .news__fill_box {
	background-color: var(--color-red);
}

.news__post:first-of-type .news__fill_box,
.news__post:nth-of-type(2n + 1) .news__fill_box {
	background-color: var(--color-blue) !important;
}

@media screen and (max-width: 1300px) {
	.news__post:first-of-type {
		grid-column: 1 / span 12;
	}

	.news__post {
		grid-column-end: span 6;
	}
}

@media screen and (max-width: 450px) {
	.news_post_container {
		gap: 0;
	}

	.news__post {
		grid-column-end: span 12;
	}

	.news__post:nth-of-type(2n) .news__hero {
		order: 0;
	}
}
