{% extends "layout.html" %}
{% block page %}
{% include 'masterhead.html' %}
{% include 'joinus.html' %}
<!-- Projects-->
<section class="projects-section bg-light" id="projects">
	<div class="container px-4 px-lg-5">
    {% for id, item in bag('featured').items() %}
			{% set image = url(item.path+'main.jpg') %}
			<div class="row gx-0 mb-5 mb-md-0 justify-content-center">
				<div class="col-lg-6"><img class="img-fluid" src="{{ image }}" alt="project image" /></div>
				<div class="col-lg-6 {% if item.sort_key % 2 == 0 or item.sort_key == 0 %} order-lg-first {% endif %} ">
					<div class="bg-black text-center h-100 project">
						<div class="d-flex h-100">
							<div class="my-4 my-lg-auto w-100 text-center">
								<h2 class="text-white mb-5">{{ item.title }}</h2>
								<a href="{{ path|url }}" class="btn btn-primary"><i class="fa fa-search" aria-hidden="true"></i> {{ _("Details") }}</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		{% endfor %}
	</div>
</section>
{% endblock %}