Адаптивный контейнер галереи сетки изображений имеет слишком много места внизу

Question

В галерее очень просто CSS:

#photos {
  column-count: 4;
  grid-gap:20px;
  padding:0 20px 20px 20px;
}

#photos img {
  width: 100% !important;
  height: auto !important;
  border-bottom: 20px solid transparent;
}

@media (max-width: 950px) {
  #photos {
  column-count: 2;
  }
}
@media (max-width: 500px) {
  #photos {
  column-count: 1;
  }
}

Кажется, что в нижней части элемента div всегда есть некоторое избыточное пространство, которое становится особенно заметным, когда для столбца установлено значение 2, как показано на изображении ниже.

РЕДАКТИРОВАТЬ: ОК HTML в основном

<div id="photos">
    <img src="">
    <img src="">
</div>

Это все, что нужно , Я выбрал изображения специально, чтобы они все были прямыми внизу.