spb/countryatlas

1import type { ReactNode } from 'react';2import { cn } from '@/lib/cn';34/**5 * Grid wrapper for small multiples: 1 col ≤ 360 px, 2 cols on phones, 3–4 on desktop. Each child should be a6 * chart with the same axes so facets compare (dataviz rule: facet instead of a 5th+ series on all-pairs forms).7 */8export function SmallMultiples({ children, columns = 3, className }: { children: ReactNode; columns?: 2 | 3 | 4; className?: string }) {9  return (10    <div11      className={cn(12        'grid gap-x-6 gap-y-6 min-[361px]:grid-cols-2',13        columns >= 3 && 'lg:grid-cols-3',14        columns === 4 && 'xl:grid-cols-4',15        className,16      )}17    >18      {children}19    </div>20  );21}22