/* Masonry images — i2t3 component styles
 * Multi-image masonry layout via native CSS columns. Optional lightbox uses the
 * globally loaded GLightbox (class "glightbox"); no own JS.
 */

.i2t3-masonry {
    column-count: var(--i2t3-masonry-cols, 3);
    column-gap: 1rem;
}
.i2t3-masonry__item {
    break-inside: avoid;
    margin: 0 0 1rem;
}
.i2t3-masonry__img { width: 100%; height: auto; display: block; border-radius: .35rem; }
.i2t3-masonry__caption { font-size: .85rem; color: var(--i2t3-text-muted, #6c757d); margin-top: .25rem; }

@media (max-width: 767.98px) { .i2t3-masonry { column-count: 2; } }
@media (max-width: 480px) { .i2t3-masonry { column-count: 1; } }