/* Latest blog posts by category (Figma Resources "Blogs"). */

.feed__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-bottom: 60px;
}

.feed__heading {
	font-size: var(--t-display);
	line-height: var(--lh-display);
}

.feed__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 60px 16px;
}

.feed__group {
	display: grid;
	align-content: start;
	gap: 16px;
}

.feed__category {
	font-size: var(--t-title-s);
	line-height: var(--lh-title-s);
}

.feed__category a {
	text-underline-offset: 4px;
}

.feed__category a:hover {
	color: var(--c-accent);
}

.feed__image {
	display: block;
	aspect-ratio: 368 / 160;
	overflow: hidden;
	background: var(--c-beige);
}

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

.feed__posts {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.feed__posts li + li {
	padding-top: 16px;
	border-top: 1px solid var(--c-line);
}

.feed__posts a {
	text-decoration: none;
	text-underline-offset: 3px;
}

.feed__posts a:hover {
	text-decoration: underline;
}

@media (max-width: 1023px) {
	.feed__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.feed__head {
		margin-bottom: 40px;
	}

	.feed__heading {
		font-size: var(--t-title);
		line-height: var(--lh-title);
	}

	.feed__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
}

/* No posts: render.php printed nothing, so drop the section's spacing too. */
.s-blog_feed:empty {
	display: none;
}