<ScrollAnimation className="overflow-hidden">
  <ScrollTranslateY className="h-dvh relative">
    <ScrollInset className="h-full relative">
      <ScrollScale className="flex bg-secondary gap-2 overflow-hidden px-6">
        <ScrollTranslateY
          yRange={['0%', '-10%']}
          className="flex flex-col gap-2"
        >
          {IMAGES_1.map((imageUrl, index) => (
            <img
              key={index}
              className="aspect-[4/2.5] inline-block align-middle h-auto max-h-full w-full  object-cover"
              src={imageUrl}
              alt="gallery item"
            />
          ))}
        </ScrollTranslateY>

        <ScrollTranslateY
          yRange={['0%', '20%']}
          className="flex mt-[-20%] relative flex-col gap-2"
        >
          {IMAGES_2.map((imageUrl, index) => (
            <img
              key={index}
              className="aspect-[4/2.5] inline-block align-middle h-auto max-h-full w-full  object-cover"
              src={imageUrl}
              alt="gallery item"
            />
          ))}
        </ScrollTranslateY>

        <ScrollTranslateY
          yRange={['0%', '-10%']}
          className="hidden md:flex flex-col gap-2"
        >
          {IMAGES_3.map((imageUrl, index) => (
            <img
              key={index}
              className="aspect-[4/2.5] inline-block align-middle h-auto max-h-full w-full  object-cover"
              src={imageUrl}
              alt="gallery item"
            />
          ))}
        </ScrollTranslateY>
      </ScrollScale>
    </ScrollInset>
  </ScrollTranslateY>
</ScrollAnimation>