{% if page.hero.count %}
	{% for hero in page.hero %}

		<article class="hero"
			{% if hero.background_image.id %}
				style="--image: url('{{ hero.background_image.make.path }}');"
			{% endif %}
		
		>
			<div class="hero__container container">

				<div class="hero__content__container">
					{% if hero.title.value %}
						<h1 class="hero__title">{{ hero.title | raw}}</h1>
					{% endif %}

					{% if hero.subtitle.value %}
						<h2 class="hero__subtitle">{{ hero.subtitle }}</h2>
					{% endif %}

					{% if hero.text.value %}
						<p class="hero__text">{{ hero.text }}</p>
					{% endif %}

					{% if hero.url.value and hero.label.value %}
						<a href="{{ hero.url.normalize }}" class="hero__btn">{{ hero.label.value }}</a>
					{% endif %}
				</div>

				<div class="hero__image__container">
					{% if hero.image.id %}
						<img src="{{ hero.image.make.path }}" class="hero__image">
					{% endif %}
				</div>

			</div>
		</article>

	{% endfor %}
{% endif %}