.blog-recents-header {
	display: grid;
	grid-template: "leading" "trailing";
	width: 100%;
	align-items: center;
	gap: 20px;
}

.blog-recents-header .search {
	grid-area: trailing;
}

.blog-recents-header .search__terms {
	grid-area: leading;
}

.blog-recents-header__title {
	grid-area: leading;
	font-size: 1.6rem;
	line-height: 1.2;
}

@media only screen and (min-width: 818px) {
	.blog-recents-header {
		grid-template: "leading trailing" 1fr/1fr 300px;
	}
}

.blog-highlights-header, .blog-pillars-header {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.blog-highlights-header__title, .blog-pillars-header__title {
	font-size: 2.2rem;
}

.articles {
	display: grid;
	gap: 50px;
	padding-top: 60px;
}

@media only screen and (min-width: 596px) {
	.articles {
		grid-auto-rows: 1fr;
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
	}
}

@media only screen and (min-width: 818px) {
	.articles {
		gap: 50px;
	}
}

@media only screen and (min-width: 1196px) {
	.articles {
		grid-template-columns: repeat(3, 1fr);
		gap: 60px;
	}
}

.articles .article {
	display: grid;
	width: 100%;
	gap: 20px;
	grid-template-rows: auto 1fr;
}

@media only screen and (min-width: 596px) {
	.articles .article {
		gap: 30px;
	}
}

@media only screen and (min-width: 818px) {
	.articles .article {
		gap: 20px;
	}
}

.articles .article>a {
	display: block;
}

@media only screen and (max-width: 596px) {
	.articles .article>a {
		display: none;
	}
}

.articles .article__image {
	width: 100%;
	aspect-ratio: 16/9;
	border-radius: 20px;
	background-color: var(--timeular-midnight-5);
	overflow: hidden;
}

.articles .article__image img {
	width: 100%;
	object-fit: cover;
}

.articles .article__content {
	display: flex;
	flex-direction: column;
}

.articles .article__title {
	color: var(--timeular-black);
	text-decoration: none;
}

.articles .article__title h4 {
	font-size: 1.1rem;
	line-height: 1.4;
	text-wrap: balance;
	margin-bottom: 0;
}

.articles .article__date {
	font-size: .8rem;
	color: var(--onyxGrey);
}

.articles .article-tag-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .8rem;
	column-gap: 12px;
}

.articles .article-tag-list__item {
	margin: 0;
	padding: 0;
}

.pagination {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 3px;
	align-self: stretch;
	padding-top: 60px;
}

.page-numbers {
	display: flex;
	width: 42px;
	height: 42px;
	padding: 12px;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	border-radius: 6px;
	background: var(--timeular-midnight-10);
	font-size: .7rem;
	font-weight: 600;
	text-decoration: none;
}

.page-numbers.current, .page-numbers:hover, .page-numbers:focus {
	background: var(--earlyDark);
	color: var(--earlyLight);
	text-decoration: none;
}

a.page-numbers {
	color: var(--timeular-midnight-100);
	grid-template-columns: repeat(2, 1fr);
}

.blog-section {
	padding-block: 100px;
}

.blog-recents:first-of-type {
	padding-top: 0;
}

.blog-recents .article .article__content {
	gap: 12px;
}

.blog-highlights:first-of-type {
	padding-top: 0;
}

@media only screen and (max-width: 596px) {
	.blog-highlights .articles .article:first-child>a {
		display: block;
	}
}

@media only screen and (min-width: 596px) {
	.blog-highlights .articles {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}
	
	.blog-highlights .articles .article:nth-child(1) .article__content {
		gap: 12px;
	}
	
	.blog-highlights .articles .article:nth-child(1) .article__title h4 {
		font-size: 1.4rem;
		line-height: 1.4;
	}
	
	.blog-highlights .articles .article ~ .article {
		grid-template-columns: calc(( 438 / 1136 ) * 100%) 1fr;
	}
}

@media only screen and (min-width: 1196px) {
	.blog-highlights .articles {
		grid-template-areas: "lg ." "lg ." "lg .";
		grid-template-columns: calc(( 438 / 1136 ) * 100%) 1fr;
		grid-template-rows: repeat(3, 1fr);
	}
	
	.blog-highlights .articles .article:nth-child(1) {
		grid-area: lg;
	}
}

.blog-pillars:first-of-type {
	padding-top: 0;
}

.blog-pillars .articles {
	grid-template-columns: 1fr;
}

@media only screen and (min-width: 1196px) {
	.blog-pillars .articles {
		grid-template-columns: 1fr 1fr;
	}
}

@media only screen and (min-width: 596px) {
	.blog-pillars .articles {
		grid-auto-rows: auto;
	}
	
	.blog-pillars .articles .article {
		grid-template-columns: calc(( 438 / 1136 ) * 100%) 1fr;
	}
}

.blog-featured {
	padding: 50px 0 0;
}

.blog-featured .articles {
	padding: 0;
	grid-template-columns: 1fr;
}

@media only screen and (max-width: 596px) {
	.blog-featured .articles .article:first-child>a {
		display: block;
	}
}

.blog-featured .articles .article {
	display: grid;
	width: 100%;
	gap: 20px;
	align-items: center;
	grid-template-rows: inherit;
}

@media only screen and (min-width: 596px) {
	.blog-featured .articles .article {
		gap: 30px;
	}
}

@media only screen and (min-width: 818px) {
	.blog-featured .articles .article {
		grid-template-columns: 1fr 1fr;
		gap: 60px;
	}
}

.blog-featured .articles .article .article__content {
	gap: 12px;
}

.blog-featured .articles .article .article__content h4 {
	font-size: 1.4rem;
	line-height: 1.4;
}