Panel

panel.html

<section class="panel light-gray-bg">
  <div class="content-wrapper">
    <div class="row">
        <ul class="blocks">
            <li>
                <div class="media-block region d1-d4 heading-top">
                    <h2 class="media-heading-top">
                        Media Heading
                    </h2>
                    <a href="#" title="Link title">
        <figure>
          <img src="http://placehold.it/295x212/ffffff" alt="Image Alt">
          <figcaption>Curabitur blandit tempus porttitor, Odio. Original by <a href="#">Lorem Ipsum</a>
                    </figcaption>
                    </figure>
                    </a>
                    <div class="media-body">
                        <h2 class="media-heading-bottom">
                            Media Heading
                        </h2>
                        <p>
                            Curabitur blandit tempus porttitor. Donec sed odio dui. Nullam id dolor
                            id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue
                            laoreet rutrum faucibus dolor.
                        </p>
                        <p class="media-meta">
                            meta
                        </p>
                    </div>
                </div>
            </li>
            <li>
                <div class="media-block region d5-d8 heading-top">
                    <h2 class="media-heading-top">
                        Media Heading
                    </h2>
                    <a href="#" title="Link title">
        <figure>
         <img src="http://placehold.it/295x212/ffffff" alt="Image Alt">
          <figcaption>Curabitur blandit tempus porttitor, Odio. Original by <a href="#">Lorem Ipsum</a>
                    </figcaption>
                    </figure>
                    </a>
                    <div class="media-body">
                        <h2 class="media-heading-bottom">
                            Media Heading
                        </h2>
                        <p>
                            Curabitur blandit tempus porttitor. Donec sed odio dui. Nullam id dolor
                            id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue
                            laoreet rutrum faucibus dolor.
                        </p>
                        <p class="media-meta">
                            meta
                        </p>
                    </div>
                </div>
            </li>
            <li>
                <div class="media-block region d9-d12 heading-top">
                    <h2 class="media-heading-top">
                        Media Heading
                    </h2>
                    <a href="#" title="Link title">
        <figure>
         <img src="http://placehold.it/295x212/ffffff" alt="Image Alt">
          <figcaption>Curabitur blandit tempus porttitor, Odio. Original by <a href="#">Lorem Ipsum</a>
                    </figcaption>
                    </figure>
                    </a>
                    <div class="media-body">
                        <h2 class="media-heading-bottom">
                            Media Heading
                        </h2>
                        <p>
                            Curabitur blandit tempus porttitor. Donec sed odio dui. Nullam id dolor
                            id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue
                            laoreet rutrum faucibus dolor.
                        </p>
                        <p class="media-meta">
                            meta
                        </p>
                    </div>
                </div>
            </li>
            <li>
                <div class="media-block region d13-d16 heading-top">
                    <h2 class="media-heading-top">
                        Media Heading
                    </h2>
                    <a href="#" title="Link title">
        <figure>
         <img src="http://placehold.it/295x212/ffffff" alt="Image Alt">
          <figcaption>Curabitur blandit tempus porttitor, Odio. Original by <a href="#">Lorem Ipsum</a>
                    </figcaption>
                    </figure>
                    </a>
                    <div class="media-body">
                        <h2 class="media-heading-bottom">
                            Media Heading
                        </h2>
                        <p>
                            Curabitur blandit tempus porttitor. Donec sed odio dui. Nullam id dolor
                            id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue
                            laoreet rutrum faucibus dolor.
                        </p>
                        <p class="media-meta">
                            meta
                        </p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
  </div>
</section>