Aside Complete

<div class="u-spacing--double u-padding--right">
    <div class="c-filter u-spacing u-background-color--gray--light u-padding u-theme--border-color--darker u-border--left can-be--dark-dark">
    <form action="" role="search" method="get" class="c-filter__search">
      <div class="l-field-container u-spacing">
        <input type="search" name="s" class="u-font--secondary--s u-color--gray" value="Search..."/>
        <div class="u-flex">
          <button class="c-filter__button o-button o-button--outline u-space--right">
            <span class="u-icon u-icon--xs u-path-fill--base"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__search</title><path d="M9.91,8.5,7.43,6A4,4,0,1,0,4,8a4,4,0,0,0,2-.57L8.5,9.91ZM2,4A2,2,0,1,1,4,6,2,2,0,0,1,2,4Z" fill="#777"/></svg>
</span>Search</button>
          <!-- /.search-form__submit -->
          <span class="c-filter__toggle js-toggle o-button o-button--simple" data-toggled="c-filter" data-prefix="c-filter"><span class="u-icon u-icon--xs u-theme--path-fill--base"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 14 14"><title>Pattern Lab Tools</title><path fill="#808080" d="M12.767 8.343c-0.735-1.272-0.293-2.903 0.986-3.643l-1.376-2.383c-0.393 0.23-0.85 0.363-1.338 0.363-1.47 0-2.662-1.2-2.662-2.68h-2.752c0.004 0.457-0.11 0.92-0.355 1.343-0.735 1.272-2.367 1.705-3.649 0.967l-1.376 2.383c0.396 0.225 0.739 0.555 0.983 0.977 0.733 1.27 0.294 2.897-0.98 3.64l1.376 2.383c0.392-0.228 0.847-0.359 1.332-0.359 1.466 0 2.654 1.192 2.662 2.665h2.752c-0.001-0.452 0.113-0.91 0.355-1.329 0.733-1.27 2.362-1.703 3.642-0.971l1.376-2.383c-0.393-0.225-0.734-0.554-0.977-0.974zM7 9.835c-1.566 0-2.835-1.269-2.835-2.835s1.269-2.835 2.835-2.835c1.566 0 2.835 1.269 2.835 2.835s-1.269 2.835-2.835 2.835z"></path></svg>
</span></span>
        </div>
      </div>
    </form>
    <!-- ./c-filter__form -->
    <form class="c-filter__form u-spacing">
      <div class="c-filter__form-item u-spacing--half">
        <h3 class="u-font--secondary--s u-font-weight--bold u-text-transform--upper u-theme--color--base">Filter</h3>
                              <div class="c-filter__form-group">
              <input id="checkbox-1" type="checkbox" name="checkbox" value="Option 1"/>
              <label for="checkbox-1">Option 1</label>
            </div>
                      <div class="c-filter__form-group">
              <input id="checkbox-2" type="checkbox" name="checkbox" value="Option 2"/>
              <label for="checkbox-2">Option 2</label>
            </div>
                        </div>
      <div class="c-filter__form-item u-spacing--half">
        <h3 class="u-font--secondary--s u-font-weight--bold u-text-transform--upper u-theme--color--base">Sort By</h3>
                              <div class="c-filter__form-group">
              <input id="radio-1" type="radio" name="radio" value="Option 1"/>
              <label for="radio-1">Option 1</label>
            </div>
                      <div class="c-filter__form-group">
              <input id="radio-2" type="radio" name="radio" value="Option 2"/>
              <label for="radio-2">Option 2</label>
            </div>
                        </div>
    </form>
    <!-- ./c-filter__form -->
  </div>
  <!-- ./c-filter -->
      <div class="c-block-wrap u-spacing">
      <div class="c-block__heading u-theme--border-color--darker">
        <h3 class="c-block__heading-title u-theme--color--darker">News</h3>
        <a href="" class="c-block__heading-link u-theme--color--base u-theme--link-hover--dark">See All</a>
      </div>
      <div class="c-block-wrap__content u-spacing">
                    <div class="c-media-block c-block c-block__stacked c-media-block__stacked">
          <div
        class="c-media-block__image c-block__image ">
        <div class="c-block__image-wrap ">
                      <picture class="picture">
              <!--[if IE 9]><video style="display: none;"><![endif]-->
                                          <source srcset="//picsum.photos/800/450/?random" media="(min-width: 500px)">
              <!--[if IE 9]></video><![endif]-->
              <img itemprop="image" srcset="//picsum.photos/600/330/?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 u-border--left u-color--gray u-theme--border-color--darker--left 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--darker u-font--primary--m ">
                              <a href="/" class="c-block__title-link u-theme--link-hover--dark">
                                Nulla finibus ligula ut nisl facilisis
                                </a>
                          </h3>
                                <p class="c-media-block__description c-block__description">Curabitur non est vulputate, euismod nibh non, sollicitudin nisi. Morbi ullamcorper purus et massa mattis fermentum.</p>
                  </div>
        <div class="c-media-block__meta c-block__meta u-theme--color--dark u-font--secondary--xs">
                      <span class="c-block__category u-text-transform--upper">Culture</span>
                                <time class="c-block__date u-text-transform--upper" datetime="2017-12-28">December 28, 2017</time>
                  </div>
              </div>
    </div>
    <!-- c-media-block__content -->
  </div>
  <!-- c-media-block -->
                    <div class="c-media-block c-block c-block__stacked c-media-block__stacked">
          <div
        class="c-media-block__image c-block__image ">
        <div class="c-block__image-wrap ">
                      <picture class="picture">
              <!--[if IE 9]><video style="display: none;"><![endif]-->
                                          <source srcset="//picsum.photos/800/450/?random" media="(min-width: 500px)">
              <!--[if IE 9]></video><![endif]-->
              <img itemprop="image" srcset="//picsum.photos/600/330/?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 u-border--left u-color--gray u-theme--border-color--darker--left 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--darker u-font--primary--m ">
                              <a href="/" class="c-block__title-link u-theme--link-hover--dark">
                                Nulla finibus ligula ut nisl facilisis
                                </a>
                          </h3>
                                <p class="c-media-block__description c-block__description">Curabitur non est vulputate, euismod nibh non, sollicitudin nisi. Morbi ullamcorper purus et massa mattis fermentum.</p>
                  </div>
        <div class="c-media-block__meta c-block__meta u-theme--color--dark u-font--secondary--xs">
                      <span class="c-block__category u-text-transform--upper">Culture</span>
                                <time class="c-block__date u-text-transform--upper" datetime="2017-12-28">December 28, 2017</time>
                  </div>
              </div>
    </div>
    <!-- c-media-block__content -->
  </div>
  <!-- c-media-block -->
              </div>
    </div>
  
  <div class="c-block-wrap u-spacing">
    <div class="c-block__heading u-theme--border-color--darker">
      <h3 class="c-block__heading-title u-theme--color--darker">More News</h3>
      <a href="" class="c-block__heading-link u-theme--color--base u-theme--link-hover--dark">See All</a>
    </div>
    <div class="c-block-wrap__content">
                <div class="c-block c-block__text  u-theme--border-color--darker u-border--left u-padding--bottom u-spacing--half">
        <h3 class="u-theme--color--darker u-font--primary--s">
              <a href="/" class="c-block__title-link u-theme--link-hover--dark">
            <strong>Aenean quis velit vel nibh commodo elementum</strong>
              </a>
          </h3>
              <span class="c-block__meta u-theme--color--dark u-font--secondary--xs">Culture</span>
                        </div>
                <div class="c-block c-block__text  u-theme--border-color--darker u-border--left u-padding--bottom u-spacing--half">
        <h3 class="u-theme--color--darker u-font--primary--s">
              <a href="/" class="c-block__title-link u-theme--link-hover--dark">
            <strong>Aenean quis velit vel nibh commodo elementum</strong>
              </a>
          </h3>
              <span class="c-block__meta u-theme--color--dark u-font--secondary--xs">Culture</span>
                        </div>
                <div class="c-block c-block__text  u-theme--border-color--darker u-border--left u-padding--bottom u-spacing--half">
        <h3 class="u-theme--color--darker u-font--primary--s">
              <a href="/" class="c-block__title-link u-theme--link-hover--dark">
            <strong>Aenean quis velit vel nibh commodo elementum</strong>
              </a>
          </h3>
              <span class="c-block__meta u-theme--color--dark u-font--secondary--xs">Culture</span>
                        </div>
                <div class="c-block c-block__text  u-theme--border-color--darker u-border--left u-padding--bottom u-spacing--half">
        <h3 class="u-theme--color--darker u-font--primary--s">
              <a href="/" class="c-block__title-link u-theme--link-hover--dark">
            <strong>Aenean quis velit vel nibh commodo elementum</strong>
              </a>
          </h3>
              <span class="c-block__meta u-theme--color--dark u-font--secondary--xs">Culture</span>
                        </div>
          </div>
  </div>
</div>

<div class="u-spacing--double u-padding--right">
  {% include '@molecules/forms/search-filter.twig' %}
  {% for content in aside_content %}
    <div class="c-block-wrap u-spacing">
      <div class="c-block__heading u-theme--border-color--darker">
        <h3 class="c-block__heading-title u-theme--color--darker">{{ content.aside_heading }}</h3>
        <a href="" class="c-block__heading-link u-theme--color--base u-theme--link-hover--dark">See All</a>
      </div>
      <div class="c-block-wrap__content u-spacing">
        {% for block in content.aside_blocks %}
          {% include '@molecules/blocks/media-block.twig' with block %}
        {% endfor %}
      </div>
    </div>
  {% endfor %}

  <div class="c-block-wrap u-spacing">
    <div class="c-block__heading u-theme--border-color--darker">
      <h3 class="c-block__heading-title u-theme--color--darker">More News</h3>
      <a href="" class="c-block__heading-link u-theme--color--base u-theme--link-hover--dark">See All</a>
    </div>
    <div class="c-block-wrap__content">
      {% for block in aside_content_blocks %}
        {% include '@molecules/blocks/content-block.twig' with block %}
      {% endfor %}
    </div>
  </div>
</div>