.dzial-layout,
.single-kolorowanka-layout,
.single-piosenka-layout,
.single-wierszyk-layout,
.single-edukacja-layout,
.wcmw-dzial-layout {
	--wcmw-dzial-side: 260px;
	--wcmw-dzial-gap: 24px;
	--wcmw-dzial-padding-x: 16px;

	display: grid;
	grid-template-columns: var(--wcmw-dzial-side) repeat(4, minmax(0, 1fr));
	gap: var(--wcmw-dzial-gap);
	align-items: start;

	width: 100%;
	max-width: 1500px;

	margin: 0 auto;
	padding: 28px var(--wcmw-dzial-padding-x) 54px;

	box-sizing: border-box;
}

.dzial-layout > *,
.single-kolorowanka-layout > *,
.single-piosenka-layout > *,
.single-wierszyk-layout > *,
.single-edukacja-layout > *,
.wcmw-dzial-layout > * {
	min-width: 0;
	box-sizing: border-box;
}

.dzial-sidebar,
.single-kolorowanka-sidebar,
.wcmw-dzial-sidebar {
	grid-column: 1;
	grid-row: 1;

	width: 100%;
	min-width: 0;
	align-self: start;
}

.dzial-content,
.single-kolorowanka-content,
.single-piosenka-content,
.single-wierszyk-content,
.single-edukacja-content,
.wcmw-dzial-main {
	grid-column: 2 / span 3;
	grid-row: 1;

	width: 100%;
	min-width: 0;
}

.dzial-ads,
.single-kolorowanka-ads,
.wcmw-dzial-aside {
	grid-column: 5;
	grid-row: 1;

	width: 100%;
	min-width: 0;
	align-self: start;

	position: static;
	top: auto;
}


/* ==================================================
   Średni desktop:
   lewe menu stałe, środek 2 kolumny, polecane obok
================================================== */

@media (max-width: 1420px) and (min-width: 981px) {
	.dzial-layout,
	.single-kolorowanka-layout,
	.single-piosenka-layout,
	.single-wierszyk-layout,
	.single-edukacja-layout,
	.wcmw-dzial-layout {
		--wcmw-dzial-side: 260px;
		--wcmw-dzial-gap: 20px;
		--wcmw-dzial-padding-x: 18px;

		grid-template-columns: var(--wcmw-dzial-side) repeat(3, minmax(0, 1fr));
		max-width: 1320px;
	}

	.dzial-sidebar,
	.single-kolorowanka-sidebar,
	.wcmw-dzial-sidebar {
		grid-column: 1;
		grid-row: 1;
	}

	.dzial-content,
	.single-kolorowanka-content,
	.single-piosenka-content,
	.single-wierszyk-content,
	.single-edukacja-content,
	.wcmw-dzial-main {
		grid-column: 2 / span 2;
		grid-row: 1;
	}

	.dzial-ads,
	.single-kolorowanka-ads,
	.wcmw-dzial-aside {
		grid-column: 4;
		grid-row: 1;
	}
}


/* ==================================================
   Wąski desktop / tablet poziomy:
   lewe menu | środek 1 kolumna | polecane 1 kolumna
================================================== */

@media (max-width: 980px) and (min-width: 701px) {
	.dzial-layout,
	.single-kolorowanka-layout,
	.single-piosenka-layout,
	.single-wierszyk-layout,
	.single-edukacja-layout,
	.wcmw-dzial-layout {
		--wcmw-dzial-side: 260px;
		--wcmw-dzial-gap: 20px;
		--wcmw-dzial-padding-x: 18px;

		grid-template-columns: var(--wcmw-dzial-side) minmax(0, 1fr) minmax(0, 1fr);
		max-width: 980px;
	}

	.dzial-sidebar,
	.single-kolorowanka-sidebar,
	.wcmw-dzial-sidebar {
		grid-column: 1;
		grid-row: 1;
	}

	.dzial-content,
	.single-kolorowanka-content,
	.single-piosenka-content,
	.single-wierszyk-content,
	.single-edukacja-content,
	.wcmw-dzial-main {
		grid-column: 2;
		grid-row: 1;
	}

	.dzial-ads,
	.single-kolorowanka-ads,
	.wcmw-dzial-aside {
		grid-column: 3;
		grid-row: 1;
	}
}


/* ==================================================
   Wąsko:
   lewe menu | środek
   polecane spada pod spód na całą szerokość
================================================== */

@media (max-width: 700px) and (min-width: 621px) {
	.dzial-layout,
	.single-kolorowanka-layout,
	.single-piosenka-layout,
	.single-wierszyk-layout,
	.single-edukacja-layout,
	.wcmw-dzial-layout {
		--wcmw-dzial-side: 260px;
		--wcmw-dzial-gap: 16px;
		--wcmw-dzial-padding-x: 12px;

		grid-template-columns: var(--wcmw-dzial-side) minmax(0, 1fr);
		max-width: 700px;
		padding-top: 20px;
		padding-bottom: 44px;
	}

	.dzial-sidebar,
	.single-kolorowanka-sidebar,
	.wcmw-dzial-sidebar {
		grid-column: 1;
		grid-row: 1;
	}

	.dzial-content,
	.single-kolorowanka-content,
	.single-piosenka-content,
	.single-wierszyk-content,
	.single-edukacja-content,
	.wcmw-dzial-main {
		grid-column: 2;
		grid-row: 1;
	}

	.dzial-ads,
	.single-kolorowanka-ads,
	.wcmw-dzial-aside {
		grid-column: 1 / -1;
		grid-row: 2;

		width: 100%;
		max-width: 100%;
		min-width: 0;

		position: static;
		top: auto;
	}
}


/* ==================================================
   Mobile:
   wszystko pod sobą
================================================== */

@media (max-width: 620px) {
	.dzial-layout,
	.single-kolorowanka-layout,
	.single-piosenka-layout,
	.single-wierszyk-layout,
	.single-edukacja-layout,
	.wcmw-dzial-layout {
		display: grid;
		grid-template-columns: 1fr;
		gap: 22px;

		width: 100%;
		max-width: 100%;

		margin: 0;
		padding: 18px 0 44px;

		box-sizing: border-box;
	}

	.dzial-sidebar,
	.single-kolorowanka-sidebar,
	.wcmw-dzial-sidebar {
		grid-column: 1;
		grid-row: 1;

		width: 100%;
		max-width: 100%;
		min-width: 0;

		position: static;
		top: auto;
	}

	.dzial-content,
	.single-kolorowanka-content,
	.single-piosenka-content,
	.single-wierszyk-content,
	.single-edukacja-content,
	.wcmw-dzial-main {
		grid-column: 1;
		grid-row: 2;

		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.dzial-ads,
	.single-kolorowanka-ads,
	.wcmw-dzial-aside {
		grid-column: 1;
		grid-row: 3;

		width: 100%;
		max-width: 100%;
		min-width: 0;

		position: static;
		top: auto;
	}
}