Image overflowing grid cell on Chrome, correct appearance on Firefox - Grid areas and Media queries

I've been having an issue with Chrome and an image that gets out of the grid cell once the screen gets smaller than 500px in width. On Firefox I don't have this issue. I've tried many different things, from using a reset.css file to (many) different CSS properties.

I've created a codepen https://codepen.io/raul-podar/pen/wvGVRaz for the issue, please try and resize to see the visual bug.

html file

<body>
   <section id="about">
      <div class="grid">
         <div id="aboutText">
            <p>something random</p>
         </div>
         <div id="aboutImage">
            <img src="https://i.imgur.com/eLVL8qX.jpg" alt="">
         </div>
      </div>
   </section >
</body>

css file

section#about .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "text image";
    background-color: #ffeded;
}

#aboutText {
    grid-area: text;
    height: 400px;
    background-color: #ed7d3a;
}

#aboutImage {
    grid-area: image;
}

#aboutImage img {
    height: auto;
    max-width: 100%;
}

@media only screen and (max-width: 68em) {
    section#about .grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 33%;
        grid-template-areas: "text" "image";
    }
    #aboutImage {
        grid-area: image;
        padding: 5%;
    }
    #aboutText {
        grid-area: text;
        height: 200px;
        width: 100%;
        background-color: #ed7d3a;
    }
    img {
        height: auto;
        object-fit: contain;
        max-width: 100%;
        max-height: 100%;
        display: block;
    }
}

Thanks for any help

Solution

The error was in the css grid-template-row property. I wasn't specifying that I want 2 rows. Firefox was understanding this from the grid template-area while Chrome not. So this can be easily fixed by puttin grid-template-row: auto auto for example