{# ========================================================================== #}
{# :: 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@small bp-l-grid__col--5@base bp-c-hero__content">
					<h1 class="bp-c-hero__title">{{data.title | safe}}</h1>

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

				<div class="bp-c-hero__image bp-l-grid__col bp-l-grid__col--offset-1@base bp-l-grid__col--6@base u-show@base">
					{{image.default("bp-c-hero__visual", data.image)}}
				</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@large">
						{{data.extraContent | safe}}
					</div>
				</div>
			</div>
		</div>
	</div>

{% endmacro %}