/* Grid base */
.grid {
  display: grid;
  gap: 1rem;

   /* Vycentrovat buňky uvnitř gridu */
  justify-items: center; /* horizontálně */
  align-items: center;   /* vertikálně */

  /* Vycentrovat celý grid, pokud má volné místo */
  justify-content: center;
  align-content: center;
}

/* Sloupce */
.col-1 { grid-template-columns: repeat(1, 1fr); }
.col-2 { grid-template-columns: repeat(2, 1fr); }
.col-3 { grid-template-columns: repeat(3, 1fr); }
.col-4 { grid-template-columns: repeat(4, 1fr); }
.col-5 { grid-template-columns: repeat(5, 1fr); }
.col-6 { grid-template-columns: repeat(6, 1fr); }

/* Řádky (pevný počet) */
.rows-1 { grid-template-rows: repeat(1, 1fr); }
.rows-2 { grid-template-rows: repeat(2, 1fr); }
.rows-3 { grid-template-rows: repeat(3, 1fr); }
.rows-4 { grid-template-rows: repeat(4, 1fr); }

/* Automatické zalamování */
.auto-fit-min-200 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.auto-fit-min-300 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Breakpointy */
@media (min-width: 640px) {
  .sm-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .sm-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .sm-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
  .lg-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .lg-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .lg-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .lg-grid-5 { grid-template-columns: repeat(5, 1fr); }
  .lg-grid-6 { grid-template-columns: repeat(6, 1fr); }
}

/* Utility pro padding */
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }

/* Utility pro gap */
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }