/*
Breakpointy używane w całym motywie (mobile-first):
- mobile:  do 767px (domyślne style)
- tablet:  od 768px
- desktop: od 1024px
*/

.container {
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--space-5);
}

.container-wide {
	max-width: var(--container-width-wide);
	margin-inline: auto;
	padding-inline: var(--space-5);
}

.section {
	padding-block: var(--space-7);
}

@media (min-width: 1024px) {
	.section {
		padding-block: var(--space-9);
	}
}

.section--alt {
	background: var(--color-bg-alt);
}

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

/* Kategorie: mobile 2 kol., tablet 2–3, desktop 3 kol. (3×2) */
.grid-categories {
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
	.grid-categories {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Produkty: mobile 2 kol., tablet 3 kol., desktop 4 kol. */
.grid-products {
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
	.grid-products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1280px) {
	.grid-products {
		grid-template-columns: repeat(4, 1fr);
	}
}