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

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

This layout displays 2 items next to eachother on desktop and below eachother on mobile.
The `l-split__item--top` modifier forces a max-height on mobile on the l-split__item

{% endset %}

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

<div class="l-split">
  <div class="l-split__item l-split__item--top">l-split__item l-split__item--top</div>
  <div class="l-split__item ">l-split__item</div>
</div>

{% endset %}