.content-section__image {
  background: var(--color-bg-dark);
  clip-path: var(--clip-cut);
  padding: 10px;
}

/* Images after H2 must render fully, without cropping. */
.content-section__image img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  clip-path: none;
}

/* H2/H3/H4/p/ul/ol margins inside .content-section__body are handled by
   the single vertical-rhythm system in css/global.css. */

/* When content-section blocks are stacked one after another, each block's
   own <link rel="stylesheet"> tag sits between the <section> elements in
   the DOM, so the adjacent-sibling combinator (+) can't see them as
   directly adjacent — the general-sibling combinator (~) is needed instead.
   Every content-section run on every page is a single contiguous block (no
   other section is ever interleaved partway through one), so this only
   ever matches the 2nd-and-later blocks of that one run.
   Without this, each stacked block contributed its own full section
   padding-block, doubling the gap between one block's last paragraph and
   the next block's H2 to ~2x --space-section. Dropping the top padding on
   every block after the first gives consecutive content-sections a single
   section gap, same as everywhere else on the page. */
.content-section ~ .content-section {
  padding-top: 0;
}