{% load cms_tags custom_tags %}
<section id="{{section_id}}" class="products-section {% if product_instance.section_class %}{{ product_instance.section_class }}{% else %}bg-light-gray{% endif %}">
	<div id="portfolio">
		<div class="container">
			<div class="text-center wow fadeInDown section-heading-contain">
				<h2 class="section-heading">{{ product_instance.title }}</h2>
				{{ product_instance.sub_title }}
			</div>
			<div class="row">
				{% for plugin in product_instance.child_plugin_instances %}
					<div class="col-md-4 col-sm-6 portfolio-item sameheight-{{product_instance.pk}} {% if product_instance.animate %}wow fadeInUp{%endif%}" data-wow-delay="{{ forloop.counter|multiply:0.25 }}s" style="visibility: visible; animation-delay: {{ forloop.counter|multiply:0.25 }}s; animation-name: fadeInUp;">
						{% render_plugin plugin %}
					</div>
				{% endfor %}
			</div>
		</div>
	</div>
</section>


<script>
$( document ).ready(function() {
	var equalizer = ".sameheight-{{product_instance.pk}}"
    var heights = $(equalizer).map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);
    $(equalizer).height(maxHeight);
});
</script>