#posts-title {
	text-align: center;
	margin-bottom: var(--space-xl);
}

.post-grid {
	--card-max-width: 360px;

	display: grid;
	justify-content: center;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), var(--card-max-width)));
	gap: var(--space-m);
}

.post-card {
	display: flex;
	flex-direction: column;
	background-color: white;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--card-shadow);
	transition:
		transform 0.2s var(--ease),
		box-shadow 0.2s var(--ease),
		border-color 0.2s var(--ease);
}

.post-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--card-shadow-hover);
	border-color: color-mix(in srgb, var(--light-green) 40%, white);
}

.post-thumb {
	aspect-ratio: 16 / 9;
	background-color: var(--tint-green-strong);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary);

	& img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.post-body {
	padding: var(--space-s-m);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3xs) var(--space-xs);
	font-size: var(--step--1);
	color: var(--light-grey);
	margin-bottom: var(--space-xs);
}

.post-tag {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	color: var(--primary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.post-card h3 {
	font-size: var(--step-1);
	font-weight: 600;
	margin-bottom: var(--space-2xs);
}

.post-card h3 a {
	color: var(--header-color);
}

.post-card h3 a:hover {
	color: var(--primary);
}

.post-card p {
	color: var(--light-grey);
	font-size: var(--step--1);
}

.post-card .card-link {
	margin-top: auto;
	padding-top: var(--space-s);
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	color: var(--primary);
}

.post-card .card-link svg {
	width: 16px;
	height: 16px;
	transition: transform 0.2s var(--ease);
}

.post-card .card-link:hover svg {
	transform: translateX(4px);
}

.post-card.is-featured {
	border-color: var(--primary);
}

.subtext a {
	font-weight: 900;
}