Expandable Grid

<ExpandableGrid>
  {products.map((product, index) => (
    <ExpandableGridCell key={product.id} index={index}>
      <div className="size-full p-6">
        <div className="relative aspect-square w-full max-w-full">
          <Image
            className="user-select-none select-none object-contain"
            fill
            alt="product"
            src={product.imageUrl}
            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
          />
        </div>
      </div>
    </ExpandableGridCell>
  ))}
</ExpandableGrid>