/* ==========================================================================
   Content section (H2 + image + text + H3 structure)
   Images after H2 must always display fully (never cropped).
   Mobile: image sits under the H2, before the text.
   ========================================================================== */
.content-section { }
.content-section__img {
  display: block;
  width: 100%;          /* full width of the page container */
  max-width: 100%;
  height: auto;         /* full, uncropped */
  object-fit: contain;
  margin-bottom: var(--space-h2-text);
}

/* Bonus-page featured images shown in full too */
.bonus-feature-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-card);
  margin-bottom: var(--space-h2-text);
}