{% load wagtailcore_tags ocyan_thumbnail %}
<section class="carbasa-quotes {{self.coyote_bg}}" id="{{ self.coyote_anchor }}">
	<div class="container">
		<div class="row">
			<div class="col-lg-6">
				{% responsive_image self.image.file classes="side-image" %}
			</div>
			<div class="col-lg-6 ms-auto">
				<div class="quotes_wrapper">
			    {% for quote in self.quotes %}
			        <div class="quote py-5">
		        		<div class="quotes-inner">
							<div class="d-flex mx-auto flex-xl-row flex-column">
								<div class="d-flex justify-content-center flex-column mt-xl-0">
									<div class="stars stars-4">
									  <i class="fa fa-star-solid"></i>
									  <i class="fa fa-star-solid"></i>
									  <i class="fa fa-star-solid"></i>
									  <i class="fa fa-star-solid"></i>
									  <i class="fa fa-star-solid"></i>
									</div>
									<h4 class="mt-3 mb-3">{{ quote.header }}</h4>
									<p class="mb-5">{{ quote.quote }}</p>
									<div class="d-flex gap-3 align-item-center">
										{% picture quote.image.file "45x45" classes="person-image" %}
										<div class="d-flex flex-column align-item-center justify-content-center">
											<p class="my-0">{{ quote.name }}</p>
											<small class="text-muted">{{ quote.function }}</small>
										</div>
									</div>
								</div>
							</div>
						</div>
			        </div>
		        {% endfor %}
				</div>
			</div>
		</div>
	</div>
</section>