{# ========================================================================== #}
{# :: Projects  #}
{# ========================================================================== #}
{#
	The projects of the home page passed and rendered by markdown content.
#}

{# ========================================================================== #}
{# :: Imports #}
{# ========================================================================== #}
{% import "components/project.njk" as project %}
{% import "components/image.njk" as image %}

{# ========================================================================== #}
{# :: Partial #}
{# ========================================================================== #}
<section class="bp-l-section bp-l-section--with-spacing bp-l-section--light">
	<div class="bp-l-container">
		<div class="bp-l-grid bp-l-grid--with-spacing bp-l-grid--align-middle@viewport-12">
			<div class="bp-l-grid__col bp-l-grid__col--9@viewport-9">
				<header class="bp-l-section__header">
					<h2 class="bp-l-section__title u-h2">{{ "home.projects.title" | i18n }}</h2>
				</header>

				<div class="bp-l-section__content">
					{% if ROUTEDATA.PROJECTS | length === 0 %}
						<p>{{ "home.projects.fallback" | i18n }}</p>
					{% endif %}

					{% for item in ROUTEDATA.PROJECTS %}
						{{project.default("", item)}}
					{% endfor %}
				</div>
			</div>

			<div class="bp-l-grid__col bp-l-grid__col--3@viewport-9 u-hide@below-viewport-9">
				{% include "./illustrations/rocket.svg" %}
			</div>
		</div>
	</div>
</section>