{# Buttons #}
{% set chevronRight = craft.assets()
	.volume('icons')
	.title('Chevron Right')
	.one()
%}

{% set chevronLeft = craft.assets()
	.volume('icons')
	.title('Chevron Left')
	.one()
%}

<section class="swiper">
	<div class="swiper-wrapper">
		{% for slide in entry.whyMopanuiSlides.all() %}
			{# Entry Image #}
			<div class="swiper-slide bg-spicy-mix grid text-cultured lg:grid-cols-2">
				<div class="inner-container-l flex flex-col justify-center justify-self-center pr-7 py-20 md:py-32 lg:justify-self-start lg:py-0 xxxl:justify-self-center xxxl:px-0">
					<h1 class="font-poppins text-base mb-7 uppercase">Why Mopanui</h1>
					<h2 class="font-poppins text-4xl leading-14 mb-8 min-h-[112px] sm:w-96">
						{{ slide.heading }}
					</h2>
					<p class="font-acumin font-light mb-10 min-h-[196px] text-xl sm:w-120">{{ slide.description }}</p>
					<div class="flex items-center space-x-4">
						<a class="bg-cultured font-acumin hover:bg-spicy-mix-shade hover:text-cultured text-lg text-spicy-mix mr-5 px-6 py-2 transition-all" href="{{ url('why-mopanui') }}">Read More</a>
						<button class="swiper-prev swiper-button group bg-cultured border-2 border-cultured hover:bg-spicy-mix-shade hover:border-spicy-mix-shade rounded-full transition-all">
							{{ svg(chevronLeft)|attr({ class: "fill-spicy-mix group-hover:fill-cultured transition-all" }) }}
						</button>
						<button class="swiper-next swiper-button group bg-cultured border-2 border-cultured hover:bg-spicy-mix-shade hover:border-spicy-mix-shade rounded-full transition-all">
							{{ svg(chevronRight)|attr({ class: "fill-spicy-mix group-hover:fill-cultured transition-all" }) }}
						</button>
					</div>
				</div>

				{% set image = slide.image.one() %}
				<img class="object-cover max-h-[77rem] w-full" src="{{ image.getUrl() }}" alt="{{ image.altText }}"/>
			</div>
		{% endfor %}
	</div>
</section>