<div id="projectsSliderXs" class="projectsSlider carousel slide mt-5" data-ride="carousel">
	<div class="carousel-inner pl-5 pr-5">
		{% for post in posts %}

		<div class="carousel-item{% if loop.index == 1 %} active{% endif %}"><div class="row">
			
			<div class="{% if is_mobile %}col-sm-12{% elseif is_tablet %}col-sm-4{% elseif is_desktop %}col-sm-3{% endif %}">
				<div class="project-item mb-4">
					<div class="overlay rounded-circle bg-gradient-2"></div>
					<img src="{{post.thumbnail|resize(400,400)}}" class="img-fluid rounded-circle" alt="{{post.title}}">
					<a href="{{post.link}}" class="d-block caption">
					<div class="text-center d-flex h-100 align-items-center p-3">
						<div>
							<h3>{{ post.title|truncate(12) }}</h3>
						</div>
					</div>
					</a>
				</div>
			</div>
			
		</div></div>
				
		{% endfor %}
	</div>
	<a class="carousel-control-prev" href="#projectsSliderXs" role="button" data-slide="prev">
	<i class="fa fa-angle-left fa-lg" aria-hidden="true"></i>
	<span class="sr-only">Previous</span>
	</a>
	<a class="carousel-control-next" href="#projectsSliderXs" role="button" data-slide="next">
	<i class="fa fa-angle-right fa-lg" aria-hidden="true"></i>
	<span class="sr-only">Next</span>
	</a>
</div>
