@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.yogaacademie-featured-image img {
		transition: none;
	}
}

@media (max-width: 781px) {
	:root {
		--navigation-height: 64px;
	}

	/*
	 * `body h1`/`body h2` (two selectors) safely outranks the theme.json
	 * element rule (a bare `h1`/`h2`, one selector) regardless of stylesheet
	 * order, so this doesn't need the source-order workarounds noted in
	 * base.css — that issue only applies to same-specificity rules.
	 */
	body h1,
	body .wp-block-post-title {
		font-size: 32px;
	}

	body h2 {
		font-size: 26px;
	}

	body h3 {
		font-size: 22px;
	}

	body p:not(.yogaacademie-eyebrow):not(.yogaacademie-footer__heading) {
		font-size: 18px;
	}

	/* Table cells are not paragraphs, so the rule above never reached them and
	   they kept inheriting the 20px body size. */
	.yogaacademie-content .wp-block-table th,
	.yogaacademie-content .wp-block-table td {
		font-size: 16px;
	}

	.yogaacademie-footer__links {
		font-size: 16px;
	}

	/*
	 * Gutter for normal content only. Not applied to .yogaacademie-content
	 * itself: WordPress cancels alignfull padding via a negative margin
	 * computed from the block's own inline padding, and knows nothing about
	 * padding added here from a stylesheet — a container-level rule would
	 * have inset full-bleed background sections too.
	 */
	.yogaacademie-content > .wp-block-post-title,
	.wp-block-media-text .wp-block-media-text__content,
	.yogaacademie-content .wp-block-post-content > :not(.alignfull, .wp-block-media-text.is-stacked-on-mobile, .wp-block-list ) {
		padding-left: 1rem;
		padding-right: 1rem;
		box-sizing: border-box;
	}

	/*
	 * Text inside a full-width section, which the rule above skips. The gutter
	 * goes on the text children rather than the section, so images, media-text
	 * and nested full-width blocks still bleed to the screen edge. Sections that
	 * carry their own padding from the editor are left alone, otherwise the two
	 * would stack.
	 */
	.yogaacademie-content .wp-block-group.alignfull:not([style*="padding"]) > :where(h1, h2, h3, h4, h5, h6, p, blockquote, .wp-block-buttons, .wp-block-table, .wp-block-columns) {
		padding-left: 1rem;
		padding-right: 1rem;
		box-sizing: border-box;
	}

	/*
	 * A list carries the gutter in its own padding, on top of the bullet indent
	 * set in pages.css. Not as a margin: WordPress's constrained layout puts
	 * `margin-inline: auto !important` on every child, which no normal rule can
	 * outrank. Only lists whose container has no gutter of its own — one inside
	 * a column already sits within the column's.
	 */
	.yogaacademie-content .wp-block-post-content > .wp-block-list,
	.yogaacademie-content .wp-block-group.alignfull:not([style*="padding"]) > .wp-block-list {
		padding-left: calc(1rem + 18px);
	}

}

@media (max-width: 622px) {
	body h1,
	body .wp-block-post-title {
		font-size: 26px;
	}

	body h2 {
		font-size: 23px;
	}

	body h3 {
		font-size: 20px;
	}

	body .wp-block-list li, p:not(.yogaacademie-eyebrow):not(.yogaacademie-footer__heading) {
        font-size: 17px;
    }

}