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

/* --------------------------------------------------------------------------
   "New Arrivals" — photo beside the 2x2 feature grid

   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, so the 620x520 artwork was pinned to 358x300 inside
   a 612px column and floated in the middle of it. Let it fill its column
   again, and give the four feature cards one height so the grid reads as a
   set rather than four loose boxes.
   -------------------------------------------------------------------------- */

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

.row.align-items-center:has(.feature-box) .row > [class*="col-"] {
  display: flex;
}

.row.align-items-center:has(.feature-box) .feature-box {
  flex: 1;
  width: 100%;
  align-items: flex-start;
}

/* the h6 inside each feature card keeps the browser default 1.33em margins,
   which stranded every description a line and a half below its title */
.row.align-items-center:has(.feature-box) .feature-box h6 {
  margin: 0 0 .35rem;
  font-size: .98rem;
  font-weight: 700;
  color: var(--navy);
}