{# ========================================================================== #}
{# :: Imports #}
{# ========================================================================== #}
{% import "general/components/tip/tip-macros.njk" as tip %}

{# ========================================================================== #}
{# :: Default #}
{# ========================================================================== #}
{% macro default(classes, data) %}

	<article class="c-step {{classes}}">
		<div class="c-step__container l-grid l-grid--with-spacing l-grid--align-middle">
			<div class="c-step__image-container l-grid__col l-grid__col--6@tablet" style="background-image: url('{{data.image}}');">
				<svg class="c-step__image" viewBox="0 0 150 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
					<clipPath id="c-step__mask" clipPathUnits="objectBoundingBox">
						<path class="c-step__path" d="M0.157056042,0.141019361 L0.837358733,0.2779289 C0.869614847,0.284420377 0.880863811,0.289817872 0.892172568,0.29836292 C0.903481325,0.306907967 0.912216724,0.318070652 0.918380488,0.331853179 C0.924544252,0.345635705 0.927972826,0.358994167 0.929976378,0.396282018 L0.949363895,0.757100544 C0.95222352,0.810320633 0.916714632,0.856108026 0.870052573,0.859369551 L0.134167707,0.859500022 C0.0874181074,0.859496802 0.0495251793,0.816269846 0.0495251793,0.762949913 L0.0577128606,0.234386754 C0.0585400086,0.181075167 0.0971026507,0.138622362 0.143844933,0.13956576 C0.148275205,0.139655176 0.152692483,0.140141204 0.157056042,0.141019361 Z"></path>
					</clipPath>
				</svg>
			</div>

			<div class="c-step__content l-grid__col l-grid__col--6@tablet">
				<h3 class="c-step__title">{{data.title}}</h3>
				<p class="c-step__text">{{data.text}}</p>

				{% if data.tip %}
						{{tip.default("c-step__tip", data.tip)}}
				{% endif %}
			</div>
		</div>

	</article>

{% endmacro %}