/* Sin JS: columnas CSS */
.l-masonry {
    column-count: var(--cols-m);
    column-gap: var(--gap);
}

.l-masonry > .g-item {
    break-inside: avoid;
    margin-bottom: var(--gap);
}

@media (min-width: 640px) {
    .l-masonry { column-count: var(--cols-t); }
}

@media (min-width: 1024px) {
    .l-masonry { column-count: var(--cols-d); }
}

/* Con JS: posiciones calculadas */
.l-masonry.is-positioned {
    column-count: auto;
    position: relative;
}

.l-masonry.is-positioned > .g-item {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
}