<section id="relume">
  <div class="px-[5%] py-16 md:py-24 lg:py-28">
    <div class="container">
      <div class="rb-12 mb-12 text-center md:mb-18 lg:mb-20">
        <h2 class="rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl">Image Gallery</h2>
        <p class="md:text-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div class="relative" role="region" aria-roledescription="carousel">
        <div class="relative">
          <div>
            <div class="flex ml-0">
              <div
                role="group"
                aria-roledescription="slide"
                class="min-w-0 shrink-0 grow-0 basis-1/2 px-3 md:basis-1/3 md:px-4"
              >
                <div class="w-full">
                  <img
                    src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
                    alt="Relume placeholder image 1"
                    class="aspect-square size-full object-cover"
                  />
                </div>
              </div>
              <div
                role="group"
                aria-roledescription="slide"
                class="min-w-0 shrink-0 grow-0 basis-1/2 px-3 md:basis-1/3 md:px-4"
              >
                <div class="w-full">
                  <img
                    src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
                    alt="Relume placeholder image 2"
                    class="aspect-square size-full object-cover"
                  />
                </div>
              </div>
              <div
                role="group"
                aria-roledescription="slide"
                class="min-w-0 shrink-0 grow-0 basis-1/2 px-3 md:basis-1/3 md:px-4"
              >
                <div class="w-full">
                  <img
                    src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
                    alt="Relume placeholder image 3"
                    class="aspect-square size-full object-cover"
                  />
                </div>
              </div>
              <div
                role="group"
                aria-roledescription="slide"
                class="min-w-0 shrink-0 grow-0 basis-1/2 px-3 md:basis-1/3 md:px-4"
              >
                <div class="w-full">
                  <img
                    src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
                    alt="Relume placeholder image 4"
                    class="aspect-square size-full object-cover"
                  />
                </div>
              </div>
              <div
                role="group"
                aria-roledescription="slide"
                class="min-w-0 shrink-0 grow-0 basis-1/2 px-3 md:basis-1/3 md:px-4"
              >
                <div class="w-full">
                  <img
                    src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
                    alt="Relume placeholder image 5"
                    class="aspect-square size-full object-cover"
                  />
                </div>
              </div>
              <div
                role="group"
                aria-roledescription="slide"
                class="min-w-0 shrink-0 grow-0 basis-1/2 px-3 md:basis-1/3 md:px-4"
              >
                <div class="w-full">
                  <img
                    src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg"
                    alt="Relume placeholder image 6"
                    class="aspect-square size-full object-cover"
                  />
                </div>
              </div>
            </div>
          </div>
          <button
            class="focus-visible:ring-border-primary gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary text-text-primary absolute size-14 rounded-full bg-neutral-white left-0 top-1/2 -translate-y-1/2 hidden md:flex md:size-12 lg:size-14"
            disabled=""
          >
            <svg
              stroke="currentColor"
              fill="currentColor"
              stroke-width="0"
              viewBox="0 0 24 24"
              class="size-6"
              height="1em"
              width="1em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z"
              ></path></svg
            ><span class="sr-only">Previous slide</span></button
          ><button
            class="focus-visible:ring-border-primary gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary text-text-primary absolute size-14 rounded-full bg-neutral-white right-0 top-1/2 -translate-y-1/2 hidden md:flex md:size-12 lg:size-14"
            disabled=""
          >
            <svg
              stroke="currentColor"
              fill="currentColor"
              stroke-width="0"
              viewBox="0 0 24 24"
              class="size-6"
              height="1em"
              width="1em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"
              ></path></svg
            ><span class="sr-only">Next slide</span>
          </button>
        </div>
        <div class="mt-[30px] flex items-center justify-center md:mt-[46px]">
          <button
            class="relative mx-[3px] inline-block size-2 rounded-full bg-neutral-darker/40"
          ></button
          ><button
            class="relative mx-[3px] inline-block size-2 rounded-full bg-neutral-darker/40"
          ></button
          ><button
            class="relative mx-[3px] inline-block size-2 rounded-full bg-neutral-darker/40"
          ></button
          ><button
            class="relative mx-[3px] inline-block size-2 rounded-full bg-neutral-darker/40"
          ></button
          ><button
            class="relative mx-[3px] inline-block size-2 rounded-full bg-neutral-darker/40"
          ></button
          ><button
            class="relative mx-[3px] inline-block size-2 rounded-full bg-neutral-darker/40"
          ></button>
        </div>
      </div>
    </div>
  </div>
</section>