/**
 * Masonry Styles für MetaModels
 * Contao 5 Standard
 */

/* Masonry Container */
.masonry-container {
    width: 100%;
    margin: 0 auto;

}

/* Masonry Items - Mobile First */
.masonry-item,
.masonry-item2 {
    width: 100%;
    margin-bottom: 2rem;
    /* Vertikaler Abstand zwischen Zeilen */
    box-sizing: border-box;
}

/* Tablet Layout - 2 Spalten */
@media (min-width: 768px) {
    .masonry-item {
        width: calc(50% - 8px);
        /* 1rem = 16px gutter, geteilt durch 2 = 8px */
        margin-bottom: 62px;
    }
}

/* Desktop Layout - 4 Spalten */
@media (min-width: 1200px) {
    .masonry-item {
        width: calc(25% - 12px);
        /* 16px gutter × 3 gaps = 48px, geteilt durch 4 = 12px */
    }

    .masonry-item2 {
        width: calc(50% - 8px);
        /* (100% - 1*16px)/2 = 50% - 8px */
    }
}

/* Verbesserungen für Performance und UX */
.masonry-item img {
    width: 100%;
    height: auto;
    display: block;
}

.masonry-item .field {
    margin-bottom: 10px;
}

.masonry-item .actions {
    margin-top: 15px;
}