<link rel="import" href="../bower_components/iron-media-query/iron-media-query.html">
<link rel="import" href="../bower_components/mason-ry/mason-ry.html">

<dom-module id="demo-masonry">
  <style>
    article, .sizer {
      width: 50%;
      margin: 0 0 1rem;
      padding: 0;
    }
    @media screen and (min-width: 500px) {
      article, .sizer { width: 260px; }
    }
  </style>

  <template>

    <iron-media-query query="(min-width: 500px)" query-matches="{{isFitWidth}}"></iron-media-query>

    <mason-ry id="articles" is-fit-width="[[isFitWidth]]" percent-position="[[!isFitWidth]]"
      column-width=".sizer" item-selector="article" transition-duration="0.1s">

      <div class="sizer"></div>
      <template is="dom-repeat" items="[[news.articles]]">
        <article>
          <img src="[[item.image]]" alt="[[item.alt]]" />
          <figcaption>[[item.title]]</figcaption>
        </article>
      </template>
    </mason-ry>

  </template>
</dom-module>

<script> 'use strict';
	Polymer({
		is: 'demo-masonry'
    /* Not pictured: the data */
  });
</script>