{% assign limit = include.limit | default: 99 %}

<section class="section{% if include.background %} section-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
	<div class="container">
		{% unless include.hide-header %}
		<div class="section-header">
			<h2 class="section-title">Trusted by hundreds</h2>
			<p class="section-description">Our Users send us bunch of smilies with our services, and we love them 😍</p>
		</div>
		{% endunless %}

		<div class="row g-6">
			{% assign i = 1 %}
			{% assign filtered-testimonials = testimonials | slice: 0, limit | split_to_n: 3 %}
			{% for group in filtered-testimonials %}
			<div class="col-md-6 col-lg-4">
				<div class="row g-6">
					{% for testimonial in group %}
					{% assign person = people[i] %}
					<div class="col-12">
						<a href="#" class="card bg-body">
							<div class="card-body">
								<div class="row mb-3">
									<div class="col-auto">{% include "ui/avatar.html" person=person size="md" %}</div>
									<div class="col">
										<h3 class="h3 m-0">{{ person.full_name }}</h3>
										<div class="text-secondary">{{ person.job_title }}</div>
									</div>
								</div>
								
								<p>
									{{ testimonial }}
								</p>
							</div>
						</a>
					</div>
					{% assign i = i | plus: 1 %}
					{% endfor %}
				</div>
			</div>
			{% endfor %}
		</div>
	</div>
</section>