/* Переопределяем CSS-columns — Masonry.js сам управляет позиционированием */
.blog-masonry {
    -moz-columns: unset;
    columns: unset;
    -moz-column-gap: unset;
    column-gap: unset;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.blog-masonry.is-ready {
    opacity: 1;
}

/* При догрузке скрываем сетку мгновенно и отключаем анимацию позиции */
.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);
    }
}