Проблема с Safari и столбцами CSS

Я создаю сетку элементов, используя чистый CSS и HTML. Я столкнулся с проблемой при тестировании в Safari. Я извлек код в CodePen, который работает так же, как моя сетка.

Это код, который я использую для воспроизведения проблемы:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
  background: WhiteSmoke;
}

.wrapper {
  display: block;
  font: 400 14px/1.3 "Helvetica", sans-serif;
  width: 100%;
  padding: 0 20px;

  @media only screen and (min-width : 768px) {
    column-count: 2;
    font-size: 17px;
    column-gap: 20px;
  }

  @media only screen and (min-width : 992px) {
    column-count: 3;
  }
}

.wrapper > * {
  @media only screen and (min-width : 768px) {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
  }
}

.wrapper > *:last-child {
  margin-bottom: 0;
}

.card {
  box-sizing: border-box;
  display: block;
  width: 100%;
  overflow: hidden;
  background: #FFF;
  border: 1px solid red;
  margin-bottom: 20px;
  padding: 15px;
  font-family: "Helvetica", sans-serif;
}

<div class = "wrapper">
  <div class = "card">A</div>
  <div class = "card">B</div>
  <div class = "card">C</div>
  <div class = "card">D</div>
  <div class = "card">E</div>
</div>

Ниже приведены два снимка экрана (оба сняты в macOS 10.13), демонстрирующие разные результаты в Chrome и Safari.

Проблема в том, что Safari, похоже, переносит маржу из предыдущего элемента во второй столбец. Есть ли способ заставить поведение, подобное Chrome?

Редактировать:

Я также должен указать, что я попытался установить .card на display: inline-block;, что делает его прекрасным как в Chrome, так и в Safari, если элементы имеют одинаковые размеры.

Ниже приведен еще один снимок экрана, на котором сравниваются Chrome и Safari, на этот раз с .card, имеющим display: inline-block;, и первый элемент намного больше остальных.