css стиль не работает должным образом для элемента столбца

Question

Я пытаюсь показать какой-нибудь элемент 'card' в двух столбцах. Но box-shadow последнего элемента первого столбца и первого элемента второго столбца отображается неправильно. Проблема в том, что, похоже, существует граница, где каждый столбец начинается и заканчивается, за исключением начала первого столбца и конца последнего столбца.

@import url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.16.0/css/mdb.min.css");

.container-masonry {
  -webkit-columns: 2 200px;
  -moz-columns: 2 200px;
  columns: 2 200px;
  column-gap: 20px;
  padding: 10px;
}

.container-masonry .card {
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
  break-inside: avoid-column !important;
}

<div class="container p-4">
  <div class="container-masonry">
    <div class="card mb-4 text-dark">
      <div class="card-header text-center">
        Departments
      </div>
      <div class="card-body text-muted">
        Department List Empty
      </div>
    </div>
    <div class="card mb-4 text-dark">
      <div class="card-header text-center">
        Departments
      </div>
      <div class="card-body text-muted">
        Department List Empty
      </div>
    </div>
    <div class="card mb-4 text-dark">
      <div class="card-header text-center">
        Departments
      </div>
      <div class="card-body text-muted">
        Department List Empty
      </div>
    </div>
    <div class="card mb-4 text-dark">
      <div class="card-header text-center">
        Departments
      </div>
      <div class="card-body text-muted">
        Department List Empty
      </div>
    </div>
  </div>
</div>

Вот что я получил: