<article class="masonry">
	<div class="masonry__container container">

		{% if page.masonry.count %}
			<ul class="masonry__items">
				{% for item in page.masonry %}
					<li class="masonry__items__item --{{ item.size_smlg }}">

						<header class="masonry__items__item__header">
							{% if item.title.value %}
								<h2 class="masonry__items__item__title">{{ item.title | raw}}</h2>
							{% endif %}
							{% if item.text.value %}
								<p class="masonry__items__item__text">{{ item.text }}</p>
							{% endif %}
							{% if item.url.value and item.label.value %}
								<a href="{{ item.url.normalize }}" class="masonry__items__item__btn">{{ item.label }}</a>
							{% endif %}
						</header>

						<div class="masonry__items__item__image__container">
							{% if item.image.id %}
								<img src="{{ item.image.make.path }}" alt="{{ item.title }}" class="masonry__items__item__image">
							{% endif %}
						</div>
					</li>
				{% endfor %}
			</ul>
		{% endif %}

	</div>
</article>
