{% extends "_grid.twig" %}
	
{% block details %}
	

	<div class="cell large-3 large-cell-block-y recht-sidebar">
		<div class="grid-y large-grid-frame">
			
			{% include 'partials/navigation.twig' %}

		</div>
	</div>

	<div class="cell large-auto large-cell-block-y recht-content">
		<div class="grid-x">
			
			{% for item in categories.pages %}
				
				<div class="cell small-12 medium-6 large-4">
				
					
					<div class="image image__grid-y image__hover-text">
						<div class="image-wrapper" data-src="{{ item.image[0] }}" data-lazy-load>
							<a class="h2" href="{{ item.url }}">{{ item.title }}</a>
						</div>
					</div>
					
			
				
				</div>
			
			{% endfor %}
			
			{% if categories.pages|length < 12 %}
				
				{% set filler = 12 - categories.pages|length  %}
					
				
				{% for i in 1 .. filler %}
					<div class="cell small-12 medium-6 large-4">
			
						{% if item.clickable == 0 %}
							<div class="image image__grid-y"><div class="image-wrapper" data-src="{{ item.image[0] }}" data-lazy-load></div></div>
						{% else %} 
							<div class="image image__grid-y">
								<div class="image-text">
									<h2 class="image-heading">{{ item.title }}</h2>
									<a class="image-link" href="{{ item.link }}">Lees verder</a>
								</div>
							</div>
						{% endif %}
			
					</div>
				{% endfor %}
				
			{% endif %}
			
			
		</div>
	</div>

  
{% endblock %}