CSS Grid auto rows height issue in Firefox ESR

Question

I use grid layouts to display a bunch of 16:9 aspect ratio divs with a background image. It works really well in all the modern browsers, until one client told that their company uses Firefox ESR, which seems not to have latest grid features.

I've experimented a little and looks like it can't get this dynamic elements height. If I add height: 61px; to the .media-element class, it works, but the aspect ratio can't be kept anymore. I suppose the issue is with grid-auto-rows property that it can't read non explicit height value, but that's only a guess.

Here is how it looks like in that browser:

And how it should look and do in other browsers:

Have anyone encountered this issue before? What's the real problem and does it have any solutions? I really don't want to make rows height fixed because I need that 16:9 aspect ratio. Or is there maybe another way to force elements to keep their aspect ratio using only CSS without any JavaScript?

.grid-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 4px;
    grid-auto-rows: auto;
    -ms-flex-line-pack: start;
    align-content: start;
    min-width: 0;
    overflow-y: auto;
    padding: 5px;
    -webkit-overflow-scrolling: touch;
}

.media-element {
    border: solid 1px #17353f;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    background: #EEEEEE;
}

div.preview-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
}

<div class="grid-content">
  <div class="media-element">
    <div class="preview-img" style="background-image: url(https://i.imgur.com/acLOzS1.jpg)"></div>     
  </div>
  <div class="media-element">
    <div class="preview-img" style="background-image: url(https://i.imgur.com/acLOzS1.jpg)"></div>     
  </div>
  <div class="media-element">
    <div class="preview-img" style="background-image: url(https://i.imgur.com/acLOzS1.jpg)"></div>     
  </div>
  <div class="media-element">
    <div class="preview-img" style="background-image: url(https://i.imgur.com/acLOzS1.jpg)"></div>     
  </div>
  <div class="media-element">
    <div class="preview-img" style="background-image: url(https://i.imgur.com/acLOzS1.jpg)"></div>     
  </div>
  <div class="media-element">
    <div class="preview-img" style="background-image: url(https://i.imgur.com/acLOzS1.jpg)"></div>     
  </div>
  <div class="media-element">
    <div class="preview-img" style="background-image: url(https://i.imgur.com/acLOzS1.jpg)"></div>     
  </div>
</div>