{# ========================================================================= #}
{# :: Inheritance #}
{# ========================================================================= #}
{% extends "brandplatform/base/extends/component/page.njk" %}

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

The visual is a decorative element containing an illustration, a background-image or both.
It has no fixed dimensions, they completly depend on the context.

{% endset %}

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

* .m-visual--contained
  Changes the behaviour of the image to scale until it reaches one of the sides
  of its parent container, without losing or changing the aspect ratio. This can
  create whitespace around the image because it is not scaled larger than its
  parent container.

* .m-visual--contained\@above-mobile-default
  Same behaviour as the m-visual--contained, but only applicable above the
  mobile-default breakpoint.

* .m-visual--contained\@above-tablet-default
  Same behaviour as the m-visual--contained, but only applicable above the
  tablet-default breakpoint.

* .m-visual--contained\@above-desktop-default
  Same behaviour as the m-visual--contained, but only applicable above the
  desktop-default breakpoint.

* .m-visual--contained\@above-desktop-large
  Same behaviour as the m-visual--contained, but only applicable above the
  desktop-large breakpoint.

* .m-visual--contained\@below-mobile-default
  Same behaviour as the m-visual--contained, but only applicable below the
  mobile-default breakpoint.

* .m-visual--contained\@below-tablet-default
  Same behaviour as the m-visual--contained, but only applicable below the
  tablet-default breakpoint.

* .m-visual--contained\@below-desktop-default
  Same behaviour as the m-visual--contained, but only applicable below the
  desktop-default breakpoint.

* .m-visual--contained\@below-desktop-large
  Same behaviour as the m-visual--contained, but only applicable below the
  desktop-large breakpoint.

{% endset %}

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

{% endset %} #}

{# ========================================================================= #}
{# :: JavaScript #}
{# ========================================================================= #}
{# {% set javascript %}

{% endset %} #}