Distributed Cards

<DistributedCards>
  <DistributedCardsContainer className="h-screen flex items-center justify-center overflow-hidden">
    <div className="grid w-full aspect-video max-w-5xl grid-cols-3 grid-rows-2 justify-center items-center gap-4 py-16 px-8">
      {CARDS.map((card, i) => (
        <DistributedCardCell
          className="relative size-full shadow-xl rounded border border-border/30 overflow-hidden"
          yRange={[card.startY, '0%']}
          xRange={[card.startX, '0%']}
          key={card.id}
        >
          <Image
            src={card.imageUrl}
            fill
            alt={'tokyo'}
            className="object-cover size-full"
            sizes="(max-width: 768px) 80vw, 768px"
          />
        </DistributedCardCell>
      ))}
    </div>
  </DistributedCardsContainer>
</DistributedCards>