/*
 * Rebel Farms — uitlegsectie #stappen (1 MOND → 4 MICROBIOOM).
 *
 * Standalone stylesheet (NIET onderdeel van de sass/CodeKit build).
 * Enqueued vanuit functions.php → rebel_stappen_assets().
 *
 * WAAROM DIT BESTAND BESTAAT
 * --------------------------
 * _rebel-homepage.scss zet al `.rebel-step { align-items: center !important }`
 * (de rijen krijgen die class van custom.js). Die regel verliest echter van een
 * regel uit WordPress core:
 *
 *     .wp-block-columns { align-items: normal !important; }
 *
 * Beide hebben specificiteit (0,1,0) én !important, dus beslist de bronvolgorde
 * — en de core-stylesheet wordt ná het theme geladen. Gevolg: de illustraties
 * stonden bovenaan hun kolom in plaats van gecentreerd. Omdat elke illustratie
 * een andere verhouding heeft (188×295, 218×185, 177×207, 180×164) verschilde de
 * hoogte per rij sterk en zakte er onder rij 2/3/4 respectievelijk 220/90/150px
 * lege ruimte weg. Rij 1 leek goed omdat die illustratie toevallig precies de
 * hoogte van de rij bepaalde.
 *
 * De fix hieronder verhoogt de specificiteit naar (0,2,0) zodat de oorspronkelijke
 * bedoeling van het theme weer geldt.
 *
 * Alleen vanaf 783px: daaronder stapelt Gutenberg de kolommen (flex-direction
 * column) en zou align-items:center horizontaal gaan centreren — dat is niet
 * gewenst en werkt daar nu al goed.
 */

@media (min-width: 783px) {
	.wp-block-columns.rebel-step {
		align-items: center !important;
	}
}