⚡ Quick Fix (TL;DR)

The Culprit: An element relying on aspect-ratio to determine its height needs an actual width to calculate that height from. Inside a grid cell combined with margin: 0 auto – commonly used to center a narrower element within a wider column – the element has no explicit width to size itself against, so it collapses toward zero instead of filling the available space.

The Fix: Add an explicit width: 100% to the element. This gives aspect-ratio something concrete to calculate against, restoring the intended proportions within the grid cell.

.hero-visual {
  width: 100%; /* aspect-ratio has nothing to calculate from without this */
  aspect-ratio: 16 / 9;
  margin: 0 auto;
}