/* case-grid breakpoints, loaded after the shared ones. */

@media (max-width: 900px) {
  .digital-cases { height: auto; min-height: 0; margin-top: 80px; }
  .digital-cases .web-section-intro h2 { font-size: 36px; line-height: 34px; }
  .digital-cases .case-grid { grid-template-columns: 1fr; gap: 44px; margin-top: 56px; padding-inline: 16px; }
  .digital-cases .case-card { height: 330px; }
  .web-cases { min-height: 1524px; margin-top: 80px; }
  .web-cases .web-section-intro h2 { max-width: 266px; font-size: 32px; line-height: 32px; }
  .web-cases .web-section-intro > p:last-child { max-width: 353px; font-size: 16px; line-height: 24px; }
  .web-cases .web-section-intro .button { margin-top: 40px; }
  .case-grid { display: block; margin-top: 80px; padding-inline: 16px; }
  .case-card { height: 380px; margin-bottom: 16px; }
  .case-card:nth-child(n+4) { display: none; }
  .case-card img { height: 364px; }
  .case-card h3 { bottom: 0; padding: 6px 14px; font-size: 14px; line-height: 18px; }
  body.digital-marketing-page .digital-cases { min-height: 0; margin-top: 80px; }
  body.digital-marketing-page .digital-cases .case-grid { padding-inline: 16px; }
  body.web-development-page .web-cases .eyebrow { width: 143px; padding: 0; }
  body.web-development-page .web-cases .web-section-intro > p:last-child { width: auto; line-height: 24px; }
  body.web-development-page .web-cases h2 { width: auto; }
  body.web-development-page .web-cases h2 { width: 230px; }
  body.web-development-page .web-cases { display: flex; flex-direction: column; padding: 84px 0 85px; }
  body.web-development-page .web-cases .web-section-intro { order: 1; }
  body.web-development-page .case-grid { order: 2; margin-top: 32px; gap: 17px; grid-template-columns: 1fr; }
  body.web-development-page .web-cases__action { order: 3; margin-top: 43px; }
  body.web-development-page .case-card { height: 380px; }
  body.web-development-page .case-card:nth-child(n + 4) { display: none; }
  body.web-development-page .case-card img { height: 380px; }
  body.web-development-page .case-card h3 { bottom: 0; height: 40px; padding: 0 22px; font-size: 16px; line-height: 38px; }
  body.web-development-page .web-cases__action .button { width: 253px; }
}

/* Mobile labels straddle the image edge and keep their text vertically centered. */
@media (max-width: 900px) {
  body.web-development-page .case-card { height: 400px; }
  body.web-development-page .case-card h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 20px;
    text-box-trim: none;
  }
}