.blog-archive__header {
	margin-bottom: var(--space-xl);
	max-width: 60ch;
}

.blog-archive__header .text-caption {
	display: block;
	margin-bottom: var(--space-2xs);
}

.blog-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin-bottom: var(--space-l);
}

.blog-filter__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-2xs) var(--space-s);
	border: var(--border-width-s) solid var(--color-border);
	border-radius: var(--radius-full);
	background-color: transparent;
	color: var(--color-text);
	font-family: var(--font-button);
	font-size: var(--text-button);
	font-weight: var(--font-weight-button);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.blog-filter__pill:hover {
	border-color: var(--color-primary);
}

.blog-filter__pill.is-active {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-btn-text);
}

.blog-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-l);
}

@media (min-width: 48rem) {
	.blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.blog-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.blog-card {
	border-radius: var(--radius-l);
	overflow: hidden;
}

.blog-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.blog-card__body {
	flex: 1;
	padding: var(--space-m);
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
}

.blog-card__category {
	display: inline-block;
	width: fit-content;
	padding: var(--space-3xs) var(--space-xs);
	border: var(--border-width-s) solid currentColor;
	border-radius: var(--radius-s);
	text-transform: uppercase;
}

.blog-card__title {
	margin: 0;
}

.blog-card__author {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
}

.blog-card__author-icon {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius-full);
	object-fit: cover;
	flex-shrink: 0;
}

.blog-card__author-icon--fallback {
	background-color: currentColor;
	opacity: 0.85;
}

.blog-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-l);
}

.blog-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
	transition: transform var(--transition-slow);
}

.blog-card:hover .blog-card__image {
	transform: scale(1.04) translateZ(0);
}

.blog-card__overlay {
	position: absolute;
	left: var(--space-m);
	right: var(--space-m);
	bottom: var(--space-s);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.blog-card__more {
	color: var(--color-text-inverse);
	font-family: var(--font-button);
	font-size: var(--text-button);
	font-weight: var(--font-weight-button);
	line-height: var(--line-height-button);
	letter-spacing: var(--letter-spacing-button);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.blog-card__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-full);
	background-color: var(--color-text-inverse);
	color: var(--color-text);
}

.blog-card__arrow svg {
	width: 1.1rem;
	height: 1.1rem;
}

.blog-card--accent {
	grid-column: 1 / -1;
}

.blog-card--accent .blog-card__body {
	justify-content: center;
}

@media (min-width: 64rem) {
	.blog-card--accent {
		grid-column: auto;
	}
}

.blog-feature-image {
	display: none;
}

.blog-feature-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 64rem) {
	.blog-feature-image {
		display: block;
		position: relative;
		grid-column: span 2;
		overflow: hidden;
		border-radius: var(--radius-l);
	}
}

.blog-pagination {
	margin-top: var(--space-xl);
	display: flex;
	justify-content: center;
	gap: var(--space-s);
}

.blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--space-xs);
	border-radius: var(--radius-full);
	text-decoration: none;
	color: var(--color-text);
	font-weight: var(--font-weight-medium);
}

.blog-pagination .page-numbers.current {
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
}

.blog-pagination .page-numbers:not(.current):hover {
	background-color: var(--color-background-alt);
}

.blog-single__hero-inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-l);
	padding: var(--space-l);
	border-radius: var(--radius-xl);
}

@media ( max-width: 63.99rem ) {
	.blog-single__hero .container {
		width: 100%;
	}

	.blog-single__hero-inner {
		border-radius: 0;
	}
}

.blog-single__hero-content {
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
	justify-content: center;
}

.blog-single__hero-title {
	margin: 0;
	max-width: 20ch;
}

.blog-single__hero-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-l);
	aspect-ratio: 16 / 9;
}

.blog-single__hero-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 64rem) {
	.blog-single__hero-inner {
		flex-direction: row;
		align-items: stretch;
		min-height: 26rem;
		padding: var(--space-xl);
	}

	.blog-single__hero-content {
		flex: 1 1 45%;
	}

	.blog-single__hero-media {
		flex: 1 1 55%;
		aspect-ratio: auto;
		min-height: 30vh;
	}
}

.blog-single__content h2,
.blog-single__content h3,
.blog-single__content h4,
.blog-single__content h5,
.blog-single__content h6 {
	font-size: var(--text-h5);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-heading);
	margin-top: var(--space-l);
	margin-bottom: var(--space-2xs);
}
.blog-single__content img {
	border-radius: var(--radius-m);
}