<!-- source-hash: 585563381a0d7558b71c533935db93f8 -->
A client-side React component that wraps Radix UI's AspectRatio primitive to maintain consistent width-to-height ratios for content containers.

## Key Components

- **AspectRatio** - Root component that maintains aspect ratio constraints for its children

## Usage Example

```typescript
import { AspectRatio } from "./aspect-ratio"

// 16:9 video aspect ratio
<AspectRatio ratio={16 / 9} className="bg-muted">
  <img 
    src="/video-thumbnail.jpg" 
    alt="Video thumbnail"
    className="rounded-md object-cover"
  />
</AspectRatio>

// Square aspect ratio for profile images
<AspectRatio ratio={1} className="w-32">
  <img 
    src="/profile.jpg" 
    alt="Profile"
    className="rounded-full object-cover"
  />
</AspectRatio>

// 4:3 traditional photo ratio
<AspectRatio ratio={4 / 3}>
  <div className="flex items-center justify-center h-full bg-gray-100">
    <span>4:3 Content</span>
  </div>
</AspectRatio>
```

This component is particularly useful for responsive images, video containers, and card layouts where maintaining consistent proportions across different screen sizes is important.