{% load ocyan_thumbnail wagtailcore_tags styling_tags i18n %}
<section class="icons_with_text {{ self.layout }} {{self.coyote_bg}}" id="{{ self.coyote_anchor }}">
	<div class="container">
		<div class="row">
			<div class="col-lg-7 me-auto">
				<div class="row css-slider">
					{% for item in self.icons %}
					<div class="col-lg-6 mb-3">
						{% block icon_body %}
						<{% if item.link %}a href="{{ item.link.get_url }}" {% else %}div {% endif %}class="icon-block{% if item.body %} has_body{% endif %}">
							{% if self.layout == "layout3" %}{% lazy_responsive_image item.image.file classes="background-image" %}{% endif %}
							{% if item.icon %}
							<span class="icons-wrapper">
								<i class="fa fa-{{ item.icon }}"></i>
								<i class="fa fa-{{ item.icon }}"></i>
							</span>
							{% endif %}
							<h4 class="{% if not item.body %}mb-0{% endif %}">{{ item.header }}</h4>
							{% if item.body %}<p class="mb-0">{{ item.body }}</p>{% endif %}
							{% if self.layout == "layout2" or self.layout == "layout1" %}{% lazy_responsive_image item.image.file classes="br-0 img-fluid mt-3" %}{% endif %}
							{% if item.link %}
							<span class="d-block mt-auto fw-bold">{% trans "Learn more" %}<i class="fa fa-arrow-circle-right ms-2"></i></span>
							{% endif %}
						</{% if item.link %}a{% else %}div{% endif %}>
						{% endblock %}
					</div>
					{% endfor %}
				</div>
			</div>
			<div class="col-lg-4">
				<div class="lead-wrapper">
					{{ self.body|richtext }}
					<div class="buttons-wrapper">
						{% include "coyote/blocks/partials/button.html" with button=self.button %}
					</div>
				</div>
			</div>
		</div>
	</div>
</section>