---
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>