/* Grid primitive - intrinsic sizing */
/* Based on S+F reference with minmax(min(350px, 100%), 1fr) */

.intrinsic-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
	grid-auto-rows: minmax(300px, auto);
	grid-auto-flow: dense;
	gap: 1px;
	background-color: var(--line-color);
	border: 1px solid var(--line-color);
}

.grid-item {
	background-color: var(--bg-color);
	padding: var(--s2);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: background-color 0.3s ease;
	cursor: pointer;
}

.grid-item:hover {
	background-color: var(--stone-100);
}

/* Featured item variants */
.grid-item.span-2-cols {
	grid-column: span 2;
}

.grid-item.span-2-rows {
	grid-row: span 2;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.grid-item.span-2-cols,
	.grid-item.span-2-rows {
		grid-column: span 1;
		grid-row: span 1;
	}
}