/* split-feature-list breakpoints, loaded after the shared ones. */

@media (max-width: 1100px) {
	/* The two columns become one: the copy centres over the features. */
	.seo-local { display: block; padding: 60px 16px 0; }
	.seo-local__copy { max-width: none; text-align: center; }
	.seo-local__copy .eyebrow { margin-inline: auto; }
	.seo-local__copy h2 { width: 330px; margin: 28px auto 0; font-size: 32px; line-height: 32px; }
	.seo-local__copy > p:not(.eyebrow) { width: min(362px, 100%); margin: 22px auto 0; font-size: 16px; line-height: 24px; }
	.seo-local__copy > p + p { margin-top: 2px; }
	.seo-local__copy .button { width: 272px; min-width: 272px; margin: 31px auto 0; }
	.seo-local__features { gap: 16px; margin-top: 64px; }
	.seo-local__features article { height: 163px; align-items: start; grid-template-columns: 42px 1fr; gap: 0 18px; padding: 20px 24px; }
	.seo-local__features span { width: 42px; height: 42px; }
	.seo-local__features span img { width: 26px; height: 26px; }
	.seo-local__features h3 { width: 230px; margin-top: -14px; font-size: 21px; line-height: 26px; }
	.seo-local__features p { width: 258px; margin-top: 12px; font-size: 14px; line-height: 24px; }

	/* Each page's own height. */
	body.seo-page .seo-local { height: 1368px; margin-top: 87px; }

	/* The Branding cards carry less copy, so they size to it. */
	body.branding-page .seo-local { height: auto; padding-bottom: 60px; }
	body.branding-page .seo-local__copy h2 { width: auto; max-width: 330px; }
	body.branding-page .seo-local__features article { height: auto; min-height: 0; }
	body.branding-page .seo-local__features h3 { width: auto; margin-top: 0; }
	body.branding-page .seo-local__features p { width: auto; margin-top: 10px; }
}
