---
interface Props {
	columns?: number;
}

const { columns = 2 } = Astro.props;
---

<div class="card-grid" style={`--columns: ${columns}`}><slot /></div>

<style>
	@layer starlight.components {
		.card-grid {
			display: grid;
			gap: 1rem;
			grid-template-columns: 1fr; /* Default: Single column */
			margin-top: 1.4rem !important;
		}

		.card-grid > :global(*) {
			margin-top: 0 !important;
		}

		/* Small screens - Always single column */
		@media (max-width: 767px) {
			.card-grid {
				grid-template-columns: 1fr !important;
				gap: 1rem;
			}
		}

		/* Tablet - 2-3 columns max */
		@media (min-width: 768px) and (max-width: 1023px) {
			.card-grid {
				grid-template-columns: repeat(min(var(--columns), 2), 1fr);
				gap: 1.5rem;
			}
		}

		/* Desktop - Full column count */
		@media (min-width: 1024px) {
			.card-grid {
				grid-template-columns: repeat(var(--columns), 1fr);
				gap: 1.7rem;
			}
		}

		/* Large Desktop - Max 4 columns for readability */
		@media (min-width: 1440px) {
			.card-grid {
				grid-template-columns: repeat(min(var(--columns), 4), 1fr);
				gap: 1.8rem;
				max-width: 1400px;
				margin: 0 auto;
			}
		}

	
	}
</style>
