/* expertise-links breakpoints, loaded after the shared ones. */

@media (max-width: 1100px) {
  body.seo-page .seo-expertise { height: 779px; min-height: 779px; margin-top: 80px; padding-top: 60px; }
  body.seo-page .seo-expertise .web-section-intro h2 { width: 330px; max-width: 330px; margin-top: 28px; font-size: 32px; line-height: 32px; }
  body.seo-page .seo-expertise .web-section-intro > p:last-child { width: 362px; margin: 22px auto 0; font-size: 16px; line-height: 24px; }
  body.seo-page .seo-expertise .expertise-grid { display: grid; width: 100%; margin-top: 28px; padding-inline: 16px; grid-template-columns: 1fr; gap: 16px; }
  body.seo-page .seo-expertise .expertise-grid a { height: 60px; }
}

@media (max-width: 900px) {
  .web-expertise { min-height: 860px; margin-top: 80px; padding: 54px 0 35px; }
  .web-expertise .web-section-intro h2 { max-width: 287px; font-size: 32px; line-height: 32px; }
  .web-expertise .web-section-intro > p:last-child { max-width: 353px; font-size: 16px; line-height: 24px; }
  .expertise-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; padding-inline: 16px; }
  .expertise-grid a { height: 60px; padding: 10px 17px; }
  .expertise-grid span { width: 41px; height: 41px; }
  .expertise-grid span img { width: 22px; height: 22px; }
  body.web-development-page .web-expertise .eyebrow { width: 143px; padding: 0; }
  body.web-development-page .web-expertise .web-section-intro > p:last-child { width: auto; line-height: 24px; }
  body.web-development-page .web-expertise h2 { width: auto; }
  body.web-development-page .web-expertise h2 { width: 300px; }
  body.web-development-page .web-expertise { padding: 53px 0 72px; }
  body.web-development-page .expertise-grid { margin-top: 33px; padding-inline: 16px; gap: 16px; grid-template-columns: 1fr; }
  body.web-development-page .expertise-grid a { height: 60px; }
  body.web-development-page .expertise-grid span { top: 9.5px; left: 17px; width: 41px; height: 41px; }
  body.web-development-page .expertise-grid span img { width: 20px; height: 20px; }
  body.web-development-page .expertise-grid strong { left: 76px; font-size: 18px; }
  body.web-development-page .expertise-grid i { top: 15.5px; right: 17px; left: auto; width: 29px; height: 29px; }
  body.email-marketing-page .web-expertise { height: auto; min-height: 0; padding: 56px 0; }
  body.email-marketing-page .web-expertise .web-section-intro h2 { width: 100%; padding-inline: 24px; font-size: 32px; line-height: 34px; }
  body.email-marketing-page .web-expertise .web-section-intro > p:last-child { width: 100%; padding-inline: 24px; font-size: 16px; line-height: 24px; }
  body.email-marketing-page .expertise-grid { width: 100%; margin-top: 40px; grid-template-columns: 1fr; gap: 12px; padding-inline: 16px; }
  body.email-marketing-page .expertise-grid a { height: 72px; }
  body.email-marketing-page .web-expertise { padding-top: 80px; }
}

@media (max-width: 900px) {
	/* The phone frame stacks the six services, each 382 x 60 on the gutter. */
	body.social-media-marketing-page .web-expertise { height: auto; min-height: 0; margin-top: 0; padding: 60px 0; }
	body.social-media-marketing-page .web-expertise .web-section-intro { padding-inline: 16px; }
	body.social-media-marketing-page .web-expertise .web-section-intro h2 { width: auto; margin-top: 32px; font-size: 32px; line-height: 32px; }
	body.social-media-marketing-page .web-expertise .web-section-intro > p:last-child { width: auto; max-width: 353px; margin-top: 20px; font-size: 16px; line-height: 24px; }
	body.social-media-marketing-page .expertise-grid { display: grid; width: 100%; grid-template-columns: 1fr; justify-content: stretch; gap: 16px; margin-top: 57px; padding-inline: 16px; }
	/* Back to a flowed row: the absolute placement is the 412.74 tile's. */
	body.social-media-marketing-page .expertise-grid a { position: static; display: flex; height: 60px; align-items: center; gap: 14px; padding: 0 16px; }
	body.social-media-marketing-page .expertise-grid span { position: static; width: 38px; height: 38px; }
	body.social-media-marketing-page .expertise-grid span img { width: 20px; height: 20px; }
	body.social-media-marketing-page .expertise-grid strong { position: static; flex: 1; font-size: 16px; line-height: 22px; transform: none; }
	body.social-media-marketing-page .expertise-grid i { position: static; width: 26px; height: 26px; }
	body.social-media-marketing-page .expertise-grid i img { width: 9px; height: 8px; }
}

@media (max-width: 413px) {
  body.seo-page .seo-expertise .web-section-intro h2,
  body.seo-page .seo-expertise .web-section-intro > p:last-child { max-width: 100%; }
  body.seo-page .seo-expertise { height: auto; }
}

@media (max-width: 900px) {
  body.email-marketing-page .web-expertise { padding: 60px 0; }
  body.email-marketing-page .web-expertise .web-section-intro { padding-inline: 16px; }
  body.email-marketing-page .web-expertise .web-section-intro h2 { width: min(236px, 100%); padding-inline: 0; margin-top: 32px; font-size: 32px; line-height: 32px; }
  body.email-marketing-page .web-expertise .web-section-intro > p:last-child { max-width: 353px; padding-inline: 0; margin-top: 24px; }
  body.email-marketing-page .expertise-grid { gap: 16px; }
  body.email-marketing-page .expertise-grid a { height: 60px; }
}

body .web-expertise.web-expertise { background-color: #fff; background-image: var(--noise); }
