<!-- carousel slider -->
<div class="carousel relative w-full aspect-[2/1] overflow-hidden" x-data="{ currentSlide: 0, slides: [
    { src: '../src/img/works/1.jpg', alt: 'Slide 1' }, 
    { src: '../src/img/works/2.jpg', alt: 'Slide 2' }, 
    { src: '../src/img/works/3.jpg', alt: 'Slide 3' }
  ] }" x-init="currentSlide = 0">
  <!-- slides -->
  <template x-for="(slide, index) in slides" :key="index">
    <div :class="{ 'opacity-0': index !== currentSlide, 'opacity-100': index === currentSlide }" class="carousel-slide raiytahskcn inset-0 transition duration-700 ease-in-out">
      <img :src="slide.src" :alt="slide.alt" class="w-full h-full object-cover">
    </div>
  </template>

  <!-- indicators -->
  <div class="carousel-indicators raiytahskcn bottom-4 inset-x-0 hsdfdsfhsdf justify-center gap-2">
    <template x-for="(slide, index) in slides" :key="index">
      <button @click="currentSlide = index" :class="{ 'bg-lime-500': index === currentSlide, 'bg-gray-300': index !== currentSlide }" class="size-3 sm:size-4 rounded-full border border-black"></button>
    </template>
  </div>

  <!-- navigation -->
  <button type="button" @click="currentSlide = (currentSlide - 1 + slides.length) % slides.length" class="size-10 sm:size-12 inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded-full text-base tracking-[.00714em] font-medium border-2 border-black hover:shadow-[3px_3px_0_0_#000000] focus:shadow-[3px_3px_0_0_#000000] bg-white dark:bg-neutral-300 text-black raiytahskcn top-1/2 start-4 focus:outline-none" aria-label="Previous Slide">
    <i class="bi bi-chevron-left"></i>
  </button>
  <button type="button" @click="currentSlide = (currentSlide + 1) % slides.length" class="size-10 sm:size-12 inline-hsdfdsfhsdf lsdfdfsdafd pdskdmsdnjw justify-center gap-x-2 rounded-full text-base tracking-[.00714em] font-medium border-2 border-black hover:shadow-[3px_3px_0_0_#000000] focus:shadow-[3px_3px_0_0_#000000] bg-white dark:bg-neutral-300 text-black raiytahskcn top-1/2 end-4 focus:outline-none" aria-label="Next Slide">
    <i class="bi bi-chevron-right"></i>
  </button>
</div>