/* ==========================================================================
   Content-section block — repeatable H2 + text + image pattern.
   Image is always a full-width block above the text, at every breakpoint —
   no side-by-side / 2-column layout.
   ========================================================================== */

.content-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-paragraph);
}

.content-section__image {
  order: 2;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  clip-path: var(--clip-card);
}

.content-section__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Full, uncropped display — used for bonus artwork and post-H2 illustrations */
.content-section__image--contain {
  aspect-ratio: auto;
  clip-path: none;
  background: var(--color-card-bg);
}

.content-section__image--contain img {
  height: auto;
  object-fit: contain;
}

.content-section__body {
  order: 3;
}

.content-section__intro {
  margin-top: 0;
}