/* ==========================================================================
   content-section block — BEM: content-section, content-section__element
   The repeatable H2 + image + text pattern used across every page.
   ========================================================================== */

.content-section__inner {
  display: grid;
  gap: var(--space-h2-gap);
  /* Grid items default to a content-based minimum width, so a wide table
     inside .content-section__body could otherwise force this whole grid
     (and the page) wider than the viewport instead of letting
     .table-wrap's own horizontal scroll handle the overflow. */
  min-width: 0;
}

.content-section__media {
  border-radius: var(--radius-card);
  overflow: hidden;
  /* Matches the native ratio of the site's content-section source images
     (1916x821) so object-fit: cover never has to crop the frame — the
     logo watermark and other corner details stay fully visible. */
  aspect-ratio: 1916 / 821;
  background: var(--color-bg-dark);
}

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

.content-section__body {
  display: block;
  min-width: 0;
}

.content-section__cta {
  justify-self: start;
  margin-top: 0.5rem;
}