Chrome vs. Firefox 😳

For this site:
https://amarlong.github.io/Deichman/frontpage.html

I have the picture set at 70dvh, and it works fine in Firefox (img 1), but not in Chrome (img 2).
This in unchartered territory for me, so not sure how to attack this issue.

Code:
.frontpage {
  picture {
    height: 70dvh;
    display: grid;
    grid-template-columns: 0.5fr 2fr 2fr 0.5fr;

    img {
      grid-column: 1 / 5;
      grid-row: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .text {
      z-index: 10;
      grid-column: 2 / 4;
      grid-row: 1;
      color: white;
      gap: 1rem;
      place-self: end start;
      padding-block-end: 10rem;

      h1 {
        font-size: clamp(2.7994rem, 2.1808rem + 3.0927vi, 4.5776rem);
        font-weight: 700;
      }

      h2 {
        font-size: clamp(1.944rem, 1.6012rem + 1.7142vi, 2.9297rem);
        font-weight: 400;
        padding-block-start: 2rem;
      }
    }
  }
}
img1.png
img2.png
Was this page helpful?