Div с «высотой: 100%» больше, чем дочерний

Я работаю в WordPress с темой Divi и сделал сетку из 2 строк и 4 столбцов. Я пытаюсь создать зигзагообразный узор в сетке, где каждый div имеет либо изображение, либо текст:

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

Я пытаюсь избавиться от лишнего пространства внизу каждого изображения, масштабируя div в соответствии с размером дочернего элемента (img).

Примечание: хотя я работаю в WordPress с темой divi, мне кажется, что проще всего сделать это с помощью пользовательского кода, поэтому я использую модуль кода Divi для HTML и пишу CSS в разделе «Внешний вид WordPress» > «Настроить» > «Дополнительный CSS».

Изображение сетки. Я здесь в инспекторе, так что это правильно вписывается в картинку

HTML:

<section>
    <div class = "grid-container">
    <div class = "grid-img-1">
      <img src = "/wp-content/uploads/2023/05/PC-grid-grapes.svg">
    </div>
    <div class = "grid-img-2">
      <img src = "/wp-content/uploads/2023/05/PC-grid-barrels.svg">
    </div>
    <div class = "grid-img-3">
      <img src = "/wp-content/uploads/2023/05/PC-grid-pouring.svg">
    </div>
    <div class = "grid-img-4">
      <img src = "/wp-content/uploads/2023/05/PC-grid-grapefield.svg">
    </div>
    <div class = "grid-link-1"></div>
    <div class = "grid-link-2"></div>
    <div class = "grid-link-3"></div>
    <div class = "grid-link-4"></div>
  </div>
</section>

CSS

/* Card grid */

.grid-container {
    display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(2, 50%);
  grid-auto-flow: row;
}

.grid-img-1 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 2;
}

.grid-img-2 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
}

.grid-img-3 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 3;
    grid-column-end: 4;
}

.grid-img-4 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 4;
    grid-column-end: 5;
}

.grid-link-1 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2;
}

.grid-link-2 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 3;
}

.grid-link-3 {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 3;
    grid-column-end: 4;
}

.grid-link-4 {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 4;
    grid-column-end: 5;
}

Я пробовал основы height: 100%;, margin/padding: 0;, box-sizing: border-box;, с !important и без height: 100%;, просто чтобы посмотреть, что сработало, но ничего не помогло.

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

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

Я надеюсь, что это проблема, которую может решить CSS, потому что, помимо того факта, что я не очень хорошо разбираюсь в JavaScript, я не знаю, где я мог бы написать свой код JavaScript в WordPress/Divi.