/* Переопределяем CSS-columns — Masonry.js сам управляет позиционированием */
.blog-masonry-wrap {
    min-height: 180px;
}

.blog-masonry-loader {
    display: none;
    min-height: 180px;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.blog-masonry-wrap.is-loading .blog-masonry-loader {
    display: flex;
}

.blog-masonry {
    -moz-columns: unset;
    columns: unset;
    -moz-column-gap: unset;
    column-gap: unset;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

.blog-masonry.blog-masonry-initializing {
    opacity: 0;
    visibility: hidden;
}

.blog-masonry-initial-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
}

.blog-masonry-wrap.is-loading .blog-masonry {
    opacity: 0;
    visibility: hidden;
}

.blog-masonry-bottom-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0 8px;
}

.blog-item--pending {
    opacity: 0;
    visibility: hidden;
}

/* При догрузке скрываем сетку мгновенно и отключаем анимацию позиции */
.blog-masonry--appending {
    opacity: 0 !important;
    transition: none !important;
}
.blog-masonry--appending .blog-item {
    transition: none !important;
}

/* Ширины элементов для 4 колонок: (100% - 3 * 12px) / 4 = 25% - 9px */
.blog-masonry .blog-item {
    width: calc(25% - 9px);
    -moz-column-break-inside: unset;
    break-inside: unset;
}

/* Планшет: 3 колонки, (100% - 2 * 12px) / 3 = 33.333% - 8px */
@media (max-width: 1023px) {
    .blog-masonry .blog-item {
        width: calc(33.333% - 8px);
    }
}

/* Мобильный: 2 колонки, (100% - 1 * 12px) / 2 = 50% - 6px */
@media (max-width: 767px) {
    .blog-masonry .blog-item {
        width: calc(50% - 6px);
    }
}