Related Posts Complete

<div class="c-related-posts u-spacing">
  <div class="c-block__heading u-theme--border-color--darker">
    <h3 class="c-block__heading-title u-theme--color--darker">Related Stories</h3>
  </div>
  <div class="c-related-posts__blocks u-spacing">
            <div class="c-media-block c-block c-block--reversed c-media-block--reversed l-grid--7-col">
          <div
        class="c-media-block__image c-block__image l-grid-item--2-col l-grid-item--m--1-col l-grid-item--l--1-col u-padding--right">
        <div class="c-block__image-wrap ">
                      <picture class="picture">
              <!--[if IE 9]><video style="display: none;"><![endif]-->
                                          <source srcset="//picsum.photos/150/100/?random" media="(min-width: 500px)">
              <!--[if IE 9]></video><![endif]-->
              <img itemprop="image" srcset="//picsum.photos/500/375/?random" alt="Alt Text">
            </picture>
                  </div>
      </div>
      <!-- c-media-block__image -->
        <div class="c-media-block__content c-block__content u-spacing l-grid-item--4-col l-grid-item--m--3-col l-grid-item--l--1-col u-border--left u-theme--border-color--darker--left u-color--gray u-spacing--half">
      <div class="u-spacing c-block__group c-media-block__group ">
        <div class="u-width--100p u-spacing">
                                <h3 class="c-media-block__title c-block__title u-theme--color--dark u-font--primary--s ">
                              <a href="/" class="c-block__title-link u-theme--link-hover--dark">
                                Mauris at ante laoreet, gravida odio gravida, fermentum lectus
                                </a>
                          </h3>
                            </div>
        <div class="c-media-block__meta c-block__meta u-theme--color--base u-font--secondary--xs">
                      <span class="c-block__category u-text-transform--upper">Culture</span>
                            </div>
              </div>
    </div>
    <!-- c-media-block__content -->
  </div>
  <!-- c-media-block -->
            <div class="c-media-block c-block c-block--reversed c-media-block--reversed l-grid--7-col">
          <div
        class="c-media-block__image c-block__image l-grid-item--2-col l-grid-item--m--1-col l-grid-item--l--1-col u-padding--right">
        <div class="c-block__image-wrap ">
                      <picture class="picture">
              <!--[if IE 9]><video style="display: none;"><![endif]-->
                                          <source srcset="//picsum.photos/150/100/?random?water" media="(min-width: 500px)">
              <!--[if IE 9]></video><![endif]-->
              <img itemprop="image" srcset="//picsum.photos/500/375/?random?water" alt="Alt Text">
            </picture>
                  </div>
      </div>
      <!-- c-media-block__image -->
        <div class="c-media-block__content c-block__content u-spacing l-grid-item--4-col l-grid-item--m--3-col l-grid-item--l--1-col u-border--left u-theme--border-color--darker--left u-color--gray u-spacing--half">
      <div class="u-spacing c-block__group c-media-block__group ">
        <div class="u-width--100p u-spacing">
                                <h3 class="c-media-block__title c-block__title u-theme--color--dark u-font--primary--s ">
                              <a href="/" class="c-block__title-link u-theme--link-hover--dark">
                                Proin sed nisl ac velit aliquam euismod non tincidunt lectus
                                </a>
                          </h3>
                            </div>
        <div class="c-media-block__meta c-block__meta u-theme--color--base u-font--secondary--xs">
                      <span class="c-block__category u-text-transform--upper">Culture</span>
                            </div>
              </div>
    </div>
    <!-- c-media-block__content -->
  </div>
  <!-- c-media-block -->
      </div>
</div>

<div class="c-related-posts u-spacing">
  <div class="c-block__heading u-theme--border-color--darker">
    <h3 class="c-block__heading-title u-theme--color--darker">Related Stories</h3>
  </div>
  <div class="c-related-posts__blocks u-spacing">
    {% for block in media_blocks %}
      {% include '@molecules/blocks/media-block.twig' with block %}
    {% endfor %}
  </div>
</div>