<section class="grid grid-cols-1 gap-12 bg-grey lg:grid-cols-2 lg:mb-16 xl:mb-24 flood-r flood-l">
	<article class="flex items-center w-full bg-blue py-12 container xl:py-16 aos-init aos-animate" data-aos="fade-right">
		<h1 class="heading-0 pr-12 text-white flood-r">
			Our Patients Love us and their new smiles
		</h1>
	</article>
	<article class="w-full p-16 xl:p-24">
		<div class="pb-24 swiper" id="imperial-sidebar">
			<div class="swiper-wrapper">
				{% for item in globalTestimonials.testimonials.all() %}
					<div class="swiper-slide">
						<div class="font-light type-xl">
							{{ item.recommendations }}
						</div>
						<div class="pt-8 mt-8 border-t border-imperial xl:mt-12 xl:pt-12">
							<h5 class="font-semibold type-xl">
								{{ item.client }}
							</h5>
						</div>
					</div>
				{% endfor %}
			</div>
			<div class="relative flex items-center justify-end gap-3 pt-12">
				<button class="swiper-button-prev !static grid !h-8 !w-8 shrink-0 place-items-center !rounded-full !border !border-pink !text-pink transition-colors after:!hidden hover:!bg-pink hover:!text-white">
					<svg xmlns="http://www.w3.org/2000/svg"
						class="w-6 h-6"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
						stroke-width="2">
						<path stroke-linecap="round"
							stroke-linejoin="round"
							d="M15 19l-7-7 7-7" />
					</svg>
				</button>
				<button class="swiper-button-next !static grid !h-8 !w-8 shrink-0 place-items-center !rounded-full !border !border-pink !text-pink transition-colors after:!hidden hover:!bg-pink hover:!text-white">
					<svg xmlns="http://www.w3.org/2000/svg"
						class="w-6 h-6"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
						stroke-width="2">
						<path stroke-linecap="round"
							stroke-linejoin="round"
							d="M9 5l7 7-7 7" />
					</svg>
				</button>
			</div>
		</div>
	</article>
</section>
