@layer components {
	.blog-grid {
		display: grid;
		gap: 2rem;
		grid-template-columns: 1fr;
	}
	@media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
	@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

	.blog-card {
		display: flex;
		flex-direction: column;
		border: 1px solid var(--color-border);
		background-color: var(--color-card);
		border-radius: var(--radius-lg);
		overflow: hidden;
		box-shadow: 0 1px 2px rgba(0,0,0,0.05);
	}
	.blog-card__image-link { display: block; }
	.blog-card__image { display: block; width: 100%; height: 12rem; object-fit: cover; }
	.blog-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
	.blog-card__category {
		font-size: 0.75rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		color: var(--color-accent);
	}
	.blog-card__title { margin-top: 0.5rem; font-size: 1.0625rem; }
	.blog-card__title a { color: inherit; text-decoration: none; }
	.blog-card__title a:hover { color: var(--color-accent); }
	.blog-card__meta { margin-top: 0.375rem; font-size: 0.8125rem; color: var(--color-muted-foreground); }
	.blog-card__summary { margin-top: 0.75rem; font-size: 0.875rem; color: var(--color-muted-foreground); flex: 1; }

	.blog-post__category {
		margin-top: 1rem;
		font-size: 0.8125rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		color: var(--color-accent);
	}
	.blog-post__meta { margin-top: 1rem; font-size: 0.875rem; color: var(--color-muted-foreground); }

	.blog-post-layout { max-width: 65ch; }
	.blog-post__image {
		width: 100%;
		height: auto;
		border-radius: var(--radius-lg);
		margin-bottom: 2rem;
	}
	.blog-post__tags {
		margin-top: 2rem;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		list-style: none;
	}
	.blog-post__tags li {
		font-size: 0.75rem;
		font-weight: 600;
		color: var(--color-muted-foreground);
		background-color: var(--color-muted);
		border-radius: 999px;
		padding: 0.25rem 0.75rem;
	}

	.blog-post__pager {
		margin-top: 3rem;
		padding-top: 1.5rem;
		border-top: 1px solid var(--color-border);
		display: flex;
		justify-content: space-between;
		gap: 1.5rem;
	}
	.blog-post__pager-link {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
		font-size: 0.875rem;
		font-weight: 600;
		color: var(--color-foreground);
		text-decoration: none;
		max-width: 45%;
	}
	.blog-post__pager-link span {
		font-size: 0.75rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		color: var(--color-muted-foreground);
	}
	.blog-post__pager-link--next { text-align: right; align-items: flex-end; }
	.blog-post__pager-link:hover { color: var(--color-accent); }
}