/* Page-specific styles for solution-plumbing-and-electric-services-customer-ai-store */
/* Add overrides here — never edit compat.css for page-specific changes */

/* --------------------------------------------------------------------------
   "Feature Highlights" — photo beside the feature list

   compat.css caps any image under an ancestor whose class contains "-item" at
   max-height:300px. Bootstrap's own `align-items-center` on this row contains
   that literal substring, and that rule outranks `.feature-image img`, so the
   582x578 artwork rendered at 400x300 and sat stranded on the far left of a
   612px column. Restore it, and keep the artwork's own proportions rather
   than the 4:3 crop `.feature-image img` would otherwise apply — the blue
   shapes and dot pattern sit outside a 4:3 box.
   -------------------------------------------------------------------------- */

.features-section .feature-image img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto;
  object-fit: contain;
}

/* this heading's class list ends in `feature`, which is enough for compat.css's
   card surface to match it — a section title was rendering inside a white card
   with a border. Only this one heading is affected. */
.features-section .section-title.feature {
  background: none;
  border: 0;
  padding: 0;
}