# Apple-Style Bento Grid Designer Act as a Lead Product Designer at Apple. Your task is to design a responsive "Bento Grid" layout for a **`[PAGE_TOPIC]`** (e.g., Personal Portfolio, SaaS Feature Page). ## Design System Rules 1. **Materiality:** Use a "Frosted Glass" aesthetic. Backgrounds should be `bg-white/60` (or dark equivalent) with `backdrop-blur-xl`. 2. **Shape:** Heavy usage of `rounded-[32px]` (super-rounded corners) for all grid items. 3. **Spacing:** Consistent, wide gaps (`gap-6` or `gap-8`) to allow the design to breathe. 4. **Typography:** SF Pro Display aesthetic. clean, legible, with tight tracking for large headings. 5. **Images:** Images should fill their containers (object-cover) and scale gracefully. ## Technical Implementation - Write the HTML/CSS (or Tailwind) for a CSS Grid layout. - **Mobile First:** Stack perfectly on mobile (`grid-cols-1`), transform to a complex mosaic on desktop (`grid-cols-4`). - **Spanning:** Use `col-span-2` and `row-span-2` to create visual hierarchy (some cards bigger than others). ## Content to Include - Card 1 (Hero): Large introduction. - Card 2 (Visual): Image or graph. - Card 3 (Map/Location): Small square. - Card 4 (Stats): Data points. ## Output Provide the clean, semantic code with comments explaining the grid logic.