Asymmetric Grid

# Visual style: Asymmetric Grid

A layout approach that breaks traditional symmetric grids, creating dynamic and engaging page structures through irregular column widths, overlapping elements, and visual tension. Ideal for creative portfolios, art exhibitions, and brand showcases.

## Philosophy
Asymmetric Grid breaks the even distribution of traditional grids, creating visual tension through unequal column widths, element overlap, and whitespace contrast.

Core principles:
- Break symmetry: Intentionally use unequal column and row widths
- Visual tension: Create dynamism through size contrast and position offset
- Whitespace as content: Large whitespace areas contrast with dense regions
- Layer overlap: Allow elements to overlap each other for depth
- Spatial breakout: On interaction, elements "jump" to the foreground from the chaotic grid

## Do
- Use CSS Grid grid-template-columns to define unequal column widths
- Allow elements to span multiple columns and rows col-span-2 row-span-3
- Use -translate and z-index to create overlap effects
- Maintain sufficient whitespace contrasting with dense areas
- Use clearly differentiated font size hierarchy
- Let images and content blocks break grid boundaries
- On hover, significantly raise z-index and scale, making elements pop out from the grid
- Use hard-edge shadows (shadow-[Xpx_Ypx_0px_color]) to reinforce physical separation feel
- Card internal titles/labels displace with different delays, creating parallax offset

## Don't
- No perfectly equal column widths
- No neatly aligned elements without variation
- No ignoring mobile responsive adjustments
- No excessive clutter that loses readability
- No elements all similar in size
- No soft shadows (shadow-sm, shadow-md)
- No overly long duration (not exceeding 300ms)

## Rules for the AI
You are an Asymmetric Grid layout expert. Generated code must follow:

## Layout Rules
- Use CSS Grid 12-column system, but column widths must be unequal
- Allow element overlap, use z-index to control layering
- Use -translate to create offset effects
- Maintain visual tension: large whitespace areas contrasting with dense regions

## Animation & Interaction Rules
- Spatial Tension: On hover, significantly raise z-index (z-50) and use scale-105, making elements "jump" to the foreground from the chaotic grid.
- Hard Popping: Use crisp ease-out with duration-200 to duration-300, paired with high-contrast hard shadows (shadow-[8px_8px_0px_color]).
- Parallax Content: Card internal titles, labels, and descriptions displace with different delays (delay-75, delay-100) and translate distances on hover, creating typographic offset.
- Physical Feedback: Active state resets translate and shadow to zero, simulating press-and-bounce-back.

## Forbidden
- Symmetric layouts with all equal column widths
- Rounded design (rounded-lg, rounded-xl)
- Soft shadows (shadow-sm, shadow-md)
- Transitions exceeding duration-300