Aspect ratio utility

.ratio-1-1 {
  aspect-ratio: 1;
  width: 100%;
  display: grid;
  place-items: center;
}

.ratio-16-9 {
  aspect-ratio: 16/9;
  width: 100%;
  display: grid;
  place-items: center;
}

.ratio-4-3 {
  aspect-ratio: 4/3;
  width: 100%;
  display: grid;
  place-items: center;
}

You are a senior frontend engineer writing a CSS layout utility library.

Goal: Create utility classes that lock elements to common aspect ratios using the CSS aspect-ratio property.

Technical constraints:
- Use aspect-ratio with a ratio value (e.g. 16/9, 4/3, 1) — not the old padding-top hack.
- Set width: 100% so the element fills its container horizontally and height is derived from the ratio.
- Include display: grid; place-items: center so content is centered inside each box.
- Use oklch() for any demo colors, not hex or rgba().
- Generate utilities for: 1:1 (square), 16:9 (widescreen), 4:3 (classic), 3:2 (photo), 9:16 (portrait).

Framework variant (pick one):
A) Vanilla CSS utility classes .ratio-1-1, .ratio-16-9, .ratio-4-3, .ratio-3-2, .ratio-9-16.
B) React component — accepts ratio prop as a string like "16/9" and renders children inside.

Edge cases to handle:
- If content is taller than the ratio allows, it overflows — add overflow: hidden or min-height: 0 to control it.
- Works on replaced elements (img, video, iframe) with object-fit: cover to fill the box.
- If both width and height are explicitly set, aspect-ratio is ignored — document this.

Return CSS.