/* ==========================================================================
   Shared Post Grid (Blog Grid)
   ========================================================================== */

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

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

/* Empty state */
.blog-grid-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--spacing-12) var(--spacing-4);
}

.blog-grid-empty-icon {
	width: 64px;
	height: 64px;
	color: var(--color-neutral-300);
	margin-bottom: var(--spacing-4);
}

.blog-grid-empty-title {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	color: var(--color-neutral-700);
	margin-bottom: var(--spacing-2);
}

.blog-grid-empty-text {
	font-size: var(--font-size-base);
	color: var(--color-neutral-500);
}