Media Block

<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="../../dist/img/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="../../dist/img/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="../../dist/img/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>