/**
 * Service detail and Services overview image + long-copy sections: avoid a narrow text column and
 * empty lower-right column on phones and tablets.
 *
 * Desktop (1200px+) is intentionally unchanged. Keep this stylesheet after
 * the two approved service-image stylesheets so their >=901px desktop rules
 * do not force the tablet layout back into two columns.
 */
@media (max-width: 1199px) {
  :is(.mmh-service-detail-page, .page-id-409) .mmh-services-feature .mmh-services-feature-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "media"
      "content";
    align-items: start;
    gap: clamp(24px, 3.5vw, 36px);
  }

  :is(.mmh-service-detail-page, .page-id-409) .mmh-services-feature .mmh-services-feature-grid > div {
    grid-area: content;
    min-width: 0;
  }

  :is(.mmh-service-detail-page, .page-id-409) .mmh-services-feature .mmh-services-feature-grid > img,
  :is(.mmh-service-detail-page, .page-id-409) .mmh-services-feature .mmh-services-feature-grid > p:has(> img) {
    grid-area: media;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  :is(.mmh-service-detail-page, .page-id-409) .mmh-services-feature .mmh-services-feature-grid > img,
  :is(.mmh-service-detail-page, .page-id-409) .mmh-services-feature .mmh-services-feature-grid > p > img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 2560 / 1396;
    object-fit: contain;
  }
}