/* Page-specific styles for solution-credit-card-service-marketing */
/* Add overrides here — never edit compat.css for page-specific changes */

/* --------------------------------------------------------------------------
   "How It Works" / "Features" — photo beside the step cards

   compat.css caps any image under an ancestor whose class contains "-item" at
   max-height:300px, and Bootstrap's own `align-items-center` on these rows
   contains that literal substring — so both photos rendered at 300px tall in
   a 612px column, adrift in white space. Let them fill their column.
   -------------------------------------------------------------------------- */

.row.align-items-center > .col-md-6 > img.img-fluid {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  border-radius: var(--radius);
}

/* the step list sits in a `d-flex justify-content-center` column, so `.line`
   shrank to its content and the cards stopped short of the column's edge -
   they now fill it and line up with the photo opposite */
.row.align-items-center .line {
  width: 100%;
}