{# ========================================================================= #}
{# :: Settings & variables #}
{# ========================================================================= #}
{% set params = {
  scope: "s-content"
} %}

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

Background colors can be added to the l-content layout. If they are used next
to each other they will create the correct spacing:

- l-content after l-content creates margin
- l-content--grey (with background color) creates padding
- l-content--grey after l-content--grey, removes margin and removes padding-top
so they stick together
- l-content after l-content--grey receives margin
- l-content--grey after l-content receives margin

{% endset %}

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

<div class="l-content l-content--grey">
  <div class="l-content__item">l-content__item</div>
  <div class="l-content__item">l-content__item</div>
</div>

<div class="l-content">
  <div class="l-content__item">l-content__item</div>
  <div class="l-content__item">l-content__item</div>
</div>

<div class="l-content l-content--grey">
  <div class="l-content__item">l-content__item</div>
  <div class="l-content__item">l-content__item</div>
</div>

<div class="l-content l-content--grey">
  <div class="l-content__item">l-content__item</div>
  <div class="l-content__item">l-content__item</div>
</div>

<div class="l-content">
  <div class="l-content__item">l-content__item</div>
  <div class="l-content__item">l-content__item</div>
</div>

{% endset %}