CSS Subgrid not honoring parent template areas in Firefox

We have a relatively simple grid/subgrid that we've distilled down to the following example. The goal is to have an image on the left spanning two rows, and then on the right a heading followed by copy. (This code doesn't show the reason for subgrid, it just shows our problem.)

<div class="level-1">
  <div class="level-2">
      <div class="image"></div>
      <h2 class="heading">Lorem</h2>
      <p class="copy">Lorem ipsum</p>
  </div>
</div>

/* Grid and subgrid setup */
.level-1 {
  display: grid;
  grid-template-columns: 10rem 1fr;
  grid-template-areas: "image heading" "image copy";
  
  .level-2 {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / 3;
  }
}

/* Grid item placement */
.image {
  grid-area: image;
}
.heading {
  grid-area: heading;
}
.copy {
  grid-area: copy;
}

In Chrome this looks as expected:

In Firefox, however, the grid areas don't appear to be coming through:

Online demo here, showing that grid works but subgrid does not in Firefox: https://codepen.io/Chris-Haas-the-builder/pen/VYLQeYd

As a fix, we can manually set the grid-row and grid-column spans on the subgrid, but that kind of defeats the purpose of templated areas. Alternatively we can set grid-template-areas: inherit on the subgrid, but we're not seeing that specifically mentioned in the spec or on MDN, so we're not certain if that is a hack or the legitimate way to do this.

Is this a Firefox bug? Or are we not correctly setting/understanding grid-template-areas with subgrid?

You set grid-template-columns: subgrid;, but you don't set grid-template-rows: subgrid;:

/* Basic setup, nothing interesting */
body{font-family: sans-serif}
*{margin: 0}
.image {aspect-ratio: 1;width: 100%;background-color: red}

/* Grid and subgrid setup */
.level-1 {
  display: grid;
  grid-template-columns: 10rem 1fr;
  grid-template-areas: "image heading" "image copy";
  
  .level-2 {
    display: grid;
    grid: subgrid / subgrid;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
  }
}

/* Grid item placement */
.image {
  grid-area: image;
}
.heading {
  grid-area: heading;
}
.copy {
  grid-area: copy;
}

<h1>Grid</h1>
<div class="level-1">
  <div class="image"></div>
  <h2 class="heading">Lorem</h2>
  <p class="copy">Lorem ipsum</p>
</div>

<br />
<hr />
<br />

<h1>Subgrid</h1>
<div class="level-1">
  <div class="level-2">
      <div class="image"></div>
      <h2 class="heading">Lorem</h2>
      <p class="copy">Lorem ipsum</p>
  </div>
</div>