CSS3 высота элементов брата постепенно увеличивается, так как я добавляю больше детей в div

Question

Я пытаюсь сделать простой CSS3 эффект наложения на изображение. Это теперь идеально, но странно то, что когда я пытаюсь добавить больше карточек с изображениями в родительский элемент, высота элементов, которые я добавил до этого, начинает постепенно увеличиваться.

Например,

1. Первая карта изображения (высота = ее высота * количество элементов от себя до дна.) => 300px * 5
2. Вторая карта изображения (высота = ее высота * количество элементов из сама до дна.) => 300px * 4
3. ... => 300px * 3
4. ... => 300px * 2
5. ... => 300px

HTML Код

      <section class="group img-gallery">

        <div class="img-card grid">
          <div class="img-container">...</div>
        </div>
        
        <div class="img-card grid">
          <div class="img-container">...</div>
        </div>
        
        <div class="img-card grid">
          <div class="img-container">...</div>
        </div>
        
        <div class="img-card grid">
          <div class="img-container">...</div>
        </div>
        
        <div class="img-card grid">
          <div class="img-container">...</div>
        </div>

</section>

Снимок экрана результатов

Снимок экрана результатов