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

The grid system is used by applying the class l-grid. In total, no more than 12
columns can fill up the grid. Every child element of the grid is called
l-grid__col. The child is properly applied by adding the amount of columns to
the child class as a modifier. For example: l-grid__col--6, l-grid__col--4, ...

**IMPORTANT TO NOTE: All these modifiers below can be combined with responsive
suffixes, except for the l-grid--with-spacing modifier.**

{% endset %}

{# ========================================================================== #}
{# :: Modifiers #}
{# ========================================================================== #}
{% set modifiers %}

- l-grid--with-spacing

	Create the same grid as the default, but with spacing between its child
	columns

- l-grid__col--1, l-grid__col--2, l-grid__col--3, ... --12

	Create a column that has a certain width, starting from 1 up until 12. The
	width is calculated by dividing the column by 12. So l-grid__col--6's width
	is equal to 12 / 6, which is 50%.

- l-grid__col--offset-1, l-grid__col--offset-2, l-grid__col--offset-3, ... -12

	Create an offset on that column, where a margin-left pushes to column to the
	right based on the with passed in the modifier. The margin-left is
	calculated by diving the column by 12. So l-grid__col--6's margin-left is
	equal to 12 / 6, which is 50%.

- l-grid--align-start

	Align the columns in the grid to the left

- l-grid--align-center

	Align the columns in the grid to the center

- l-grid--align-end

	align the columns in the grid to the right

- l-grid--align-top

	Align the columns in the grid vertically to the top. If one column is
	longer in height, the smaller one will the placed on the top of the row.

- l-grid--align-middle

	Align the columns in the grid vertically to the middle. If one column is
	longer in height, the smaller one will the placed on the middle of the row.

- l-grid--align-bottom

	Align the columns in the grid vertically to the bottom. If one column is
	longer in height, the smaller one will the placed on the bottom of the row.

- l-grid--stretch

	Stretch all the columns to make sure they are the same height

- l-grid--space-between

	Create the equal space between each column

- l-grid--space-around

	Create the equal space around each column

- l-grid__col--align-top

	Align the column vertically to the top

- l-grid__col--align-middle

	Align the column vertically to the middle

- l-grid__col--align-bottom

	Align the column vertically to the bottom

- l-grid__col--stretch

	Stretch the column to be the same height as the rest if the rest is longer
	in height

- l-grid__col--first

	Change the position of the column to be the first column in a row

- l-grid__col--last

	Change the position of the column to be last in a row

- l-grid__col--auto

	Do not specify a width, make the content fill up the available space

- l-grid__col--grow

	Make the column take up the entire remaining space

- l-grid--reverse

	Reverse the position of the columns within the grid

{% endset %}

{# ========================================================================== #}
{# :: States #}
{# ========================================================================== #}
{# {% set states %}

{% endset %} #}