<section class="usa-section usa-section--light" aria-labelledby="light-media-header-1 light-media-header-2">
  <div class="grid-container">
    <h1 class="usa-sr-only">Media block component</h1>
    <div class="grid-row grid-gap">
      <div class="usa-media-block tablet:grid-col">
        <img class="usa-media-block__img" src="{{ img_path }}/circle-124.png" alt="A blue placeholder circle">
        <div class="usa-media-block__body">
          <h2 id="light-media-header-1" class="usa-graphic-list__heading">Highlight in 6 words or less</h2>
          <p>
            Media blocks can be used to highlight your values, specific program areas, or results.
            Never highlight anything without a goal.
          </p>
        </div>
      </div>
      <div class="usa-media-block tablet:grid-col">
        <img class="usa-media-block__img" src="{{ img_path }}/circle-124.png" alt="A blue placeholder circle">
        <div class="usa-media-block__body">
          <h2 id="light-media-header-2" class="usa-graphic-list__heading">Improve clarity</h2>
          <p>
            Keep body text short and sweet to help with understanding. Concise text also helps with type spacing.
            We recommend 30 words or less.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="usa-section usa-section--dark" aria-labelledby="dark-media-header-1">
  <div class="grid-container">
    <div class="grid-row grid-gap">
      <div class="usa-media-block tablet:grid-col">
        <img class="usa-media-block__img" src="{{ img_path }}/circle-124.png" alt="A blue placeholder circle">
        <div class="usa-media-block__body">
          <h2 id="dark-media-header-1" class="usa-graphic-list__heading">Increase Understanding</h2>
          <p>
            Add a graphic to help supplement the body text next to it. Make sure your alt text describes the image itself and
            not a copy of the text next to it.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>
