/* ==========================================================================
   Content-Section-Block
   ========================================================================== */

.content-section {
  scroll-margin-top: 90px;
}

.content-section__inner > h2 {
  margin-block-end: var(--space-h2-text);
}

.content-section__media {
  width: 100%;
  margin-block-end: var(--space-h2-text);
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: var(--color-bg-dark);
}

.content-section__image {
  display: block;
  width: 100%;
  height: auto;
}

.content-section__body--spaced {
  margin-block-start: var(--space-h2-text);
}

.content-section__body h3 {
  margin-block-start: var(--space-h3-text, var(--space-md));
  margin-block-end: 0.6rem;
}

.content-section__body p {
  margin-block-end: var(--space-paragraph);
}

.content-section__body p:last-child {
  margin-block-end: 0;
}

.content-section__body ul,
.content-section__body ol {
  margin-block-end: var(--space-paragraph);
  padding-inline-start: 1.25rem;
  color: var(--color-text-primary);
}

.content-section__body li {
  margin-block-end: 0.4rem;
}

.content-section__body li:last-child {
  margin-block-end: 0;
}

.content-section__body strong {
  color: var(--color-white);
}

.section--surface {
  background-color: var(--color-bg-dark);
  border-radius: var(--radius-card);
  padding-block: var(--space-section);
}

.section--surface .content-section__media {
  background-color: var(--color-bg-primary);
}