{% load ocyan_thumbnail wagtailcore_tags styling_tags %}

<section class="hero content hero--transparent-header">
	<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>