{% load wagtailcore_tags styling_tags ocyan_thumbnail %}
<section class="image_with_text {{ self.layout }} {{self.coyote_bg}}" id="{{ self.coyote_anchor }}">
	<div class="container">
		<div class="row">
			<div class="col-lg-6 layout-image">
				{% if self.image_fill %}
					{% lazy_responsive_image self.image.file classes="img-fluid w-100 img-fill" %}
				{% else %}
					{% lazy_responsive_image self.image.file classes="img-fluid w-100" %}
				{% endif %}
			</div>
			<div class="col-lg-6 layout-lead">
				<div class="lead-wrapper">
					<div>
						{% if self.body %}{{ self.body|richtext }}{% endif %}
						{% if self.buttons %}
						<div class="buttons-wrapper">
							{% for x in self.buttons %}
								{% include "coyote/blocks/partials/button.html" with button=x %}
							{% endfor %}
						</div>
						{% endif %}
					</div>

					{% if self.counter %}
					<div class="d-lg-flex mt-5 gap-5">
						{% for item in self.counter %}
						<div class="counter{% if not forloop.last %} mb-lg-0 mb-4{% endif %}">
							<h2>{{ item.number }}</h2>
							<p class="m-0 text-muted fw-bold">{{ item.label }}</p>
						</div>
						{% endfor %}
					</div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
</section>