/* Page-specific styles for solution-education-school-marketing-ai-store */
/* Add overrides here — never edit compat.css for page-specific changes */

/* --------------------------------------------------------------------------
   "Popular Programs" — artwork beside the programme 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, which beat `.program-img`'s own sizing and left the
   591x591 artwork at 400x300 in a 612px column. Restore it, and keep its own
   square proportions instead of the 4:3 crop `.program-img` would apply.
   -------------------------------------------------------------------------- */

.popular-programs .program-img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  max-width: 520px;
  aspect-ratio: auto;
  object-fit: contain;
  margin-inline: auto;
}

/* `.popular-programs` is a navy band, but compat.css paints every `main h4/h5`
   (and the display h2) navy, which beat the column's `text-white` and left the
   programme titles navy-on-navy - invisible. Put them back on the band ink. */
.popular-programs :is(h2, h3, h4, h5) {
  color: #fff;
}