How can I make child of grid take 100% height in Safari?

Question

Help me adjust my code so that it will be working in Safari. Initially I used answer from here with a few adjustments. I needed my card to be responsive and has some additional elements at the bottom. Here's my code:

.gallery {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(2, 1fr);
}

.card {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14);
    max-width: 200px;
    padding: 10px 10px 20px;
    cursor: pointer;
    position: relative;
}
  
.wrapper {
    width: 100%;
    position: relative;
    margin-bottom: 20px;
}
 
.wrapper::before {
    content: '';
    padding-bottom: 100%;
    display: block;
}

.img-grid {
    display: grid;
    border-radius: 4px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.img-grid > div {
    position: relative;
    width: 100%;
    height: 100%;
}

.img-grid > div:first-child {
    grid-column: 1 / span 2;
}

img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logo {
    width: 50px;
    height: 50px;
    background: gainsboro;
    float: left;
    margin-right: 15px;
}

h4,p {
    margin: 3px 0;
}

p {
    font-size: 13px;
}

<div class="gallery">
<div class="card">
      <div class="wrapper">
        <div class="img-grid">
        <div>
        <img loading="lazy" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg"></img>
        </div>
        
        <div>
        <img loading="lazy" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg"></img>
        </div>
        
        <div>
        <img loading="lazy" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg"></img>
        </div>
        </div>
      </div>
      
      <div class="logo"></div>
      <h4>Logo name</h4>
      <p>Some description</p>
</div>
<div class="card">
      <div class="wrapper">
        <div class="img-grid">
        <div>
        <img loading="lazy" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg"></img>
        </div>
        
        <div>
        <img loading="lazy" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg"></img>
        </div>
        
        <div>
        <img loading="lazy" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510_960_720.jpg"></img>
        </div>
        </div>
      </div>
      
      <div class="logo"></div>
      <h4>Logo name</h4>
      <p>Some description</p>
</div>
</div>

It works fine in Chrome, but it doesn't work in Safari(current and older). It's because I needed my cards to be responsive and always maintain square grid. So I used same trick on the wrapper that's widely used to maintain responsive squares. But as a result of that height: 100% is no longer working in Safari. Is there any way to make it work? I would appreciate some your help.