/* ==================================================
   Średni desktop:
   środek 2 kolumny, polecane 1 kolumna
================================================== */

@media (max-width: 1420px) and (min-width: 981px) {
	.dzial-content .wp-block-post-template,
	.dzial-content .wp-block-query .wp-block-post-template,
	.dzial-content .edukacja-grid,
	.dzial-content .edukacja-materialy-grid,
	.dzial-content .piosenki-katalog-grid,
	.dzial-content .wierszyki-grid-custom,
	.edukacja-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 20px !important;
	}

	.promo-kolorowanki-lista,
	.promo-piosenki-lista,
	.polecane-wierszyki-lista,
	.promo-edukacja-lista,
	.polecane-edukacja-lista,
	.wcmw-promo-list {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}
}


/* ==================================================
   Wąski desktop / tablet poziomy:
   środek 1 kolumna, polecane 1 kolumna
================================================== */

@media (max-width: 980px) and (min-width: 701px) {
	.dzial-content .wp-block-post-template,
	.dzial-content .wp-block-query .wp-block-post-template,
	.dzial-content .edukacja-grid,
	.dzial-content .edukacja-materialy-grid,
	.dzial-content .piosenki-katalog-grid,
	.dzial-content .wierszyki-grid-custom,
	.edukacja-grid {
		grid-template-columns: 1fr !important;
		gap: 18px !important;
	}

	.promo-kolorowanki-lista,
	.promo-piosenki-lista,
	.polecane-wierszyki-lista,
	.promo-edukacja-lista,
	.polecane-edukacja-lista,
	.wcmw-promo-list {
		grid-template-columns: 1fr !important;
		gap: 18px !important;
	}
}


/* ==================================================
   621–700 px:
   środek 1 kolumna,
   polecane pod spodem 2x2
================================================== */

@media (max-width: 700px) and (min-width: 621px) {
	.dzial-content .wp-block-post-template,
	.dzial-content .wp-block-query .wp-block-post-template,
	.dzial-content .edukacja-grid,
	.dzial-content .edukacja-materialy-grid,
	.dzial-content .piosenki-katalog-grid,
	.dzial-content .wierszyki-grid-custom,
	.edukacja-grid {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}

	.promo-kolorowanki-lista,
	.promo-piosenki-lista,
	.polecane-wierszyki-lista,
	.promo-edukacja-lista,
	.polecane-edukacja-lista,
	.wcmw-promo-list {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 16px !important;
	}
}


/* ==================================================
   Mobile:
   środek 2x2,
   polecane 2x2
================================================== */

@media (max-width: 620px) {
	.dzial-sidebar,
	.single-kolorowanka-sidebar,
	.wcmw-dzial-sidebar {
		padding: 16px;
		border-radius: 22px;
	}

	.dzial-content > h1:first-child,
	.dzial-content > h2:first-child,
	.dzial-ads > h2,
	.dzial-ads > h3,
	.dzial-ads > .wp-block-heading {
		font-size: 28px;
		line-height: 1.15;
		margin-bottom: 18px;
	}

	.dzial-content .wp-block-post-template,
	.dzial-content .wp-block-query .wp-block-post-template,
	.dzial-content .edukacja-grid,
	.dzial-content .edukacja-materialy-grid,
	.dzial-content .piosenki-katalog-grid,
	.dzial-content .wierszyki-grid-custom,
	.edukacja-grid,
	.promo-kolorowanki-lista,
	.promo-piosenki-lista,
	.polecane-wierszyki-lista,
	.promo-edukacja-lista,
	.polecane-edukacja-lista,
	.wcmw-promo-list {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 14px !important;
	}
}


/* ==================================================
   Bardzo wąsko:
   wszystko 1 kolumna
================================================== */

@media (max-width: 430px) {
	.dzial-content .wp-block-post-template,
	.dzial-content .wp-block-query .wp-block-post-template,
	.dzial-content .edukacja-grid,
	.dzial-content .edukacja-materialy-grid,
	.dzial-content .piosenki-katalog-grid,
	.dzial-content .wierszyki-grid-custom,
	.edukacja-grid,
	.promo-kolorowanki-lista,
	.promo-piosenki-lista,
	.polecane-wierszyki-lista,
	.promo-edukacja-lista,
	.polecane-edukacja-lista,
	.wcmw-promo-list {
		grid-template-columns: 1fr !important;
	}

	.dzial-sidebar .wp-block-search__inside-wrapper {
		flex-direction: column;
		align-items: stretch;
	}

	.dzial-sidebar .wp-block-search__button {
		width: 100%;
	}
}