/**
 * Le Tour de Moi - Grid System
 * Utilitaires de grille simples basés sur CSS Grid.
 */

.grid {
    display: grid;
    gap: var(--space-md);
}

/* --- Colonnes Responsive --- */

/* 2 colonnes à partir de MD */
@media (min-width: 768px) {
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }
}

/* 3 colonnes à partir de LG */
@media (min-width: 1024px) {
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-lg);
    }
}

/* 4 colonnes à partir de XL */
@media (min-width: 1280px) {
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-xl);
    }
}

/* --- Utilitaires d'alignement --- */

.items-center { align-items: center; }
.content-center { justify-content: center; }

/* --- Gaps --- */

.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }