{# ========================================================================== #}
{# :: Settings & variables #}
{# ========================================================================== #}
{% set params = {
	order: 2,
	scope: "s-bp-form"
} %}

{# ========================================================================== #}
{# :: Info #}
{# ========================================================================== #}
{% set info %}

The l-form__grid makes heavy use of **l-grid** and **l-grid--with-margins** to
split up its contents of input fields in seperate parts. This makes sure that
the form layout is responsive as well.

{% endset %}

{# ========================================================================== #}
{# :: Preview #}
{# ========================================================================== #}
{% set preview %}

<form class="l-form">
	l-form

	<div class="l-form__grid">
		<div class="l-grid l-grid--with-margins">
			<div class="l-grid__col-6-12">input</div>

			<div class="l-grid__col-6-12">input</div>

			<div class="l-grid__col-12-12">select</div>

			<div class="l-grid__col-3-12">input</div>

			<div class="l-grid__col-4-12">input</div>

			<div class="l-grid__col-5-12">input</div>
		</div>
	</div>

	<div class="l-form__grid">
		<div class="l-grid l-grid--with-margins">
			<div class="l-grid__col-4-12">input</div>

			<div class="l-grid__col-4-12">input</div>

			<div class="l-grid__col-4-12">select</div>

			<div class="l-grid__col-12-12">input</div>
		</div>
	</div>

	<footer class="l-form__footer">
		l-form__footer
	</footer>

</form>

{% endset %}