/* Base Container - Mobile First (1 Column) */
.masonry-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Force 1 column on mobile */
    grid-auto-rows: 10px;
    /* This creates a fine "mesh" for items to snap to */
    gap: 1rem;
    align-items: start;
    /* CRITICAL: Prevents items from stretching vertically */
}

/* Desktop View (3 Columns) */
@media (min-width: 700px) {
    .two-column.masonry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .three-column.masonry-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .four-column.masonry-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

}

.masonry-item .custom-card {
    width: 100%;
     /* Ensure the card takes full width of the grid cell */
}

/* Image Styling */
.masonry-item img {
    width: 100%;
    display: block;
    height: auto;
    border-radius: 1rem;
    object-fit: cover;
    border-color: black;
    border-style: solid;
    border-width: thin;
}

.masonry-label {
    display: block;
    font-size: 0.8rem;
    font-style: italic;
    text-align: center;
}