Úzký (sm):
Široký (lg):
*/
.container {
width: 100%;
max-width: var(--container-md);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.container--sm { max-width: var(--container-sm); }
.container--lg { max-width: var(--container-lg); }
/* ── 6. GRID ──────────────────────────────────────────────── */
/*
Výchozí: auto-fit – samo rozloží obsah.
Override: data-cols="2|3|4|5" – zafixuje počet sloupců.
Výška obrázků přepisovatelná per-grid:
*/
.grid {
display: grid;
gap: var(--grid-gap);
grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min), 100%), 1fr));
}
.grid[data-cols="1"] { grid-template-columns: 1fr; }
.grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.grid[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }
.grid--center { align-items: center; }
@media (max-width: 960px) {
.grid[data-cols="3"],
.grid[data-cols="4"],
.grid[data-cols="5"] { grid-template-columns: repeat(2, 1fr); }
/* grid--stack-md – přeskládá 2 sloupce na 1 při 960px */
.grid.grid--stack-md[data-cols="2"],
.grid.grid--stack-md { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
.grid[data-cols="2"],
.grid[data-cols="3"],
.grid[data-cols="4"],
.grid[data-cols="5"] { grid-template-columns: 1fr; }
}
/* Tabulka akcí – na tabletu zmenšit tlačítka */
@media (max-width: 960px) and (min-width: 600.02px) {
.akce-tabulka__akce .btn {
font-size: .72rem;
padding: .2rem .5rem;
}
}
/* ── 7. CARD ──────────────────────────────────────────────── */
/*
Univerzální komponenta – karty, bloky obsahu, služby, produkty.
Struktura:
obrázek s ořezem (cover)
obrázek bez ořezu
obsah karty