{# ========================================================================== #}
{# :: Imports #}
{# ========================================================================== #}
{% import "components/image.njk" as image %}


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

	<div class="bp-c-hero {{classes}}">
		<div class="bp-l-container">
			<div class="bp-l-grid">
				<div class="bp-l-grid__col bp-l-grid__col--7@viewport-7 bp-l-grid__col--5@viewport-9 bp-c-hero__content">
					<h1 class="bp-c-hero__title">{{data.title | safe}}</h1>

					<div class="bp-c-hero__text">{{data.text | safe}}</div>
				</div>

				<div class="bp-c-hero__image bp-l-grid__col bp-l-grid__col--offset-1@viewport-9 bp-l-grid__col--6@viewport-9 u-hide@below-viewport-9">
					{% if data.image %}
						{{image.default("bp-c-hero__visual", data.image)}}
					{% elseif data.illustration %}
						<div class="bp-c-hero__visual">
							{{data.illustration | safe}}
						</div>
					{% endif %}
				</div>
			</div>
		</div>

		<div class="bp-c-hero__extra">
			<div class="bp-l-container">
				<div class="bp-l-grid">
					<div class="bp-l-grid__col--9@viewport-12">
						{{data.extraContent | safe}}
					</div>
				</div>
			</div>
		</div>
	</div>

{% endmacro %}