/**
 * responsive.css — the handful of cross-component breakpoint adjustments
 * that don't belong inside a single component's own file. Most responsive
 * behavior is already fluid (clamp() typography, flex-wrap layouts) or
 * handled locally within header.css/footer.css/editorial.css.
 */

@media (max-width: 767px) {
	.ditechted-hero {
		flex-direction: column;
	}

	.ditechted-hero__visual {
		order: 2;
	}

	.ditechted-hero__text {
		order: 1;
	}

	.ditechted-feature-pair.wp-block-columns {
		flex-direction: column;
	}

	.ditechted-editorial-row {
		flex-direction: column;
		gap: var(--wp--preset--spacing--2xs);
	}

	.ditechted-editorial-row__number {
		flex: none;
	}

	.wp-block-buttons {
		width: 100%;
	}

	.ditechted-final-cta .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

@media (min-width: 1600px) {
	main#main-content {
		max-width: var(--wp--style--global--wide-size, 1360px);
		margin-inline: auto;
	}
}