feat: refactor Columns to support container query-based sizing

[brandonmcconnell]

Summary

Adds container query support to the Columns component, enabling it to adjust its layout based on the width of its parent container rather than the viewport.

This change:

• Implements CSS variables for dynamic column sizing and utilizes Tailwind's container query syntax for responsive layouts.
• Replaces previous static media query breakpoints with a more flexible container-based approach.
• Includes a new Storybook example to demonstrate the Columns component's behavior within a container query context.
• Standardizes the default column count and removes a max-width constraint, enhancing the component's adaptability.

Test Plan

• Verify the new InsideContainer story in Storybook, observing that the Columns component correctly re-arranges its child elements when the containing div changes width (e.g., by resizing the Storybook canvas or the browser window).
• Confirm that existing Columns stories still render as expected, maintaining their responsiveness to viewport changes where container queries are not explicitly applied.

---

Note

Medium Risk
Updates Columns layout logic from fixed breakpoint-based classes to CSS-variable/container-query-driven sizing, which can affect responsive rendering across consuming pages. Risk is moderate and largely visual/layout-related.

Overview
Refactors Columns to size its grid using a --cols CSS variable and Tailwind container-query syntax, replacing the previous hardcoded sm:grid-cols-{n} breakpoint rules and removing the implicit max-width constraint.

Adds a new Storybook story (InsideContainer) demonstrating that Columns can respond to a parent @container width (not just the viewport), and centralizes the default column count via a new DEFAULT_COLS export.

^{Written by Cursor Bugbot for commit 48a2833. This will update automatically on new commits. Configure here.}