← back to Stayclaim

src/components/Rail.tsx

23 lines

/**
 * Rail — horizontal editorial carousel.
 * Max 6 visible items. Serif section label.
 */
export function Rail({
  label,
  children,
}: {
  label: string;
  children: React.ReactNode;
}) {
  return (
    <section className="py-10">
      <div className="max-w-6xl mx-auto px-6 mb-5">
        <h2 className="font-display text-2xl md:text-3xl text-ink tracking-[-0.01em]">{label}</h2>
      </div>
      <div className="max-w-6xl mx-auto px-6">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">{children}</div>
      </div>
    </section>
  );
}