{% load ocyan_thumbnail wagtailcore_tags styling_tags %}

<style type="text/css">
	header{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background: transparent;
		z-index: 9999;
	}
</style>

<section class="hero content">
	<div class="container">
		<div class="row">
			<div class="hero-lead col-lg-6 my-auto pe-lg-5{% if self.position == 'left' %} order-lg-2 order-1{% endif %}">
				{{ self.body|richtext }}
				{% if self.buttons %}
				<div class="buttons-wrapper">
					{% for button in self.buttons %}
						<a class="btn btn-{{ button.button_style }} btn-lg" href="{{ button.link.get_url }}" {% if button.new_tab %}target="_blank" rel="noopener noreferrer"{% endif %} aria-label="{{ button.label }}">
							<small>{{ button.label }}</small>
						</a>
					{% endfor %}
				</div>
				{% endif %}
			</div>
			<div class="col-lg-6 ps-lg-5 my-auto ms-auto {% if self.position == 'left' %}order-lg-1 order-2{% endif %}">
				{% responsive_image self.image.file alt=self.image.title classes="img-fluid" %}
			</div>
		</div>
	</div>
</section>