.content-section {
  padding-block: var(--space-section);
  border-top: 0.0625rem solid rgba(255, 255, 255, 0.05);
}
.content-section:first-of-type {
  border-top: none;
}

.content-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
/* Grid items default to min-width: auto, which lets wide intrinsic content
   (e.g. a data table nested inside .content-section__text) push the whole
   grid — and with it the page — wider than the viewport. Forcing 0 here
   makes any oversized content scroll inside its own wrapper (like
   .data-table-wrap) instead of overflowing the section horizontally. */
.content-section__grid > * {
  min-width: 0;
}

/* H2 -> media -> text, media always full-width above the text block
   (same order and width on every screen size — matches the ~3:1 ratio
   of the actual banner images, so nothing is cropped or letterboxed). */
.content-section__media {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 3 / 1;
  background: var(--color-bg-dark);
}
.content-section__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--color-bg-dark);
}

.content-section__cta {
  margin-top: 1.5rem;
}

.content-section__cta--standalone {
  margin-top: -1rem;
  margin-bottom: var(--space-section);
}

.content-section--intro .content-section__text,
.content-section--table {
  padding-top: 0;
}