Вадим Кот

Для начала уберите у v-list-item-content class="align-self-start", чтобы он был на всю высоту.

https://codepen.io/web-tech/pen/ymKyrq

Уберите для .card-item-wrapper .item-block display: inline-block;
В случае с css columns inline-block бессмыслен, да и еще и добавляет внизу отступ (есть такой нюанс при работе css columns с inline-block в некоторых версиях webkit браузеров).
А чтобы перенос происходил так, как у вас был с inline-block, добавьте breake-inside:

.card-item-wrapper .item-block {
    padding: 0 15px;
    margin-bottom: 1rem;
    max-width: 100%;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

https://codepen.io/web-tech/pen/EBEwBr

Так нужно?

https://codepen.io/web-tech/pen/zVRxeW

Все отлично работает https://codepen.io/web-tech/pen/LoRbpQ

Если у вас какие то проблемы возникли, то ссылку на воспроизведение этой проблемы. Иначе гадание по кофейной гуще только возможно.

Есть такой устаревший тег dir https://developer.mozilla.org/en-US/docs/Web/HTML/... - он в браузерных стилях по умолчанию имеет отступы сверху и снизу (стили одинаковы для ul, menu, dir). Зачем его используете (dir class="main-header clearfix")? Очепятка?
Из косяков header не закрыт и background-attachment: relative сами придумали?
Для .header в background после url зачем точка с запятой?
https://validator.w3.org/ - избавил бы сразу ото всех этих вопросов.