<section class="section" id="grid-small-gutters">
    <header class="section-header row">
        <h1 class="section-title col-xs-24">
            <a href="#grid-small-gutters">Grid with small gutters</a>
        </h1>
    </header>

    <div class="row row-sm section-gallery">

        <div class="col-md-6">

            <figure class="media">
                <div class="media-img ratio-2-1">
                    <a href="">
                        <img src="http://lorempixel.com/400/200/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>

        <div class="col-md-6">

            <figure class="media">
                <div class="media-img ratio-2-1">
                    <a href="">
                        <img src="http://lorempixel.com/400/200/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>

        <div class="col-md-6">

            <figure class="media">
                <div class="media-img ratio-2-1">
                    <a href="">
                        <img src="http://lorempixel.com/400/200/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>

        <div class="col-md-6">

            <figure class="media">
                <div class="media-img ratio-2-1">
                    <a href="">
                        <img src="http://lorempixel.com/400/200/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="">Subheader</a>
                    </div>
                </figcaption>
            </figure>

        </div>
    </div>

    <div class="row">
        <div class="col-xs-24">
            {{#markdown}}
```xml
<div class="container">
    <div class="row row-sm">
        <div class="col-md-6">
            …
        </div>
    </div>
</div>
```
            {{/markdown}}
        </div>

        <div class="col-md-24">
            <div class="guidance guidance-usage m-t-xs">
                {{#markdown}}
{{> grid-small-gutter-guidance.md}}
                {{/markdown}}
            </div>
        </div>

    </div>
</section>
