/**
 * [tgg_category_games] grid — uses .tgg-card markup from archive but with
 * caller-controlled column count via --tgg-cols. Falls back to 2 cols on
 * narrow viewports regardless of the requested count.
 */
.tgg-category-grid {
	display: grid;
	grid-template-columns: repeat(var(--tgg-cols, 4), minmax(0, 1fr));
	gap: 16px;
	margin: 24px 0;
}

.tgg-category-grid .tgg-card-thumb {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 8px;
}

.tgg-category-grid .tgg-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.tgg-category-grid .tgg-card:hover .tgg-card-thumb img {
	transform: scale(1.05);
}

@media (max-width: 1024px) {
	.tgg-category-grid {
		grid-template-columns: repeat(min(var(--tgg-cols, 4), 4), minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.tgg-category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

@media (max-width: 380px) {
	.tgg-category-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}