
/* Masonry Gallery */
.masonry-gallery {
    column-count: 2;
    column-gap: 20px;
}

/* Ensure images are larger by limiting columns to 2 max even on large screens */
/* On very small screens, 2 columns is still okay for masonry feel, or 1 if very narrow */
@media (max-width: 400px) {
    .masonry-gallery {
        column-count: 1;
    }
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 20px;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background-color: #f0f0f0; /* placeholder color */
}

.masonry-item a {
    display: block;
    width: 100%;
    height: 100%;
}

.masonry-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
}

.masonry-item:hover img {
    transform: scale(1.08);
}

/* 
   Varied Aspect Ratios for "Perfect Fit" Masonry Look 
   Using nth-child to create a pseudo-random pattern
*/

/* Default to slightly tall */
.masonry-item {
    aspect-ratio: 3/4; 
}

/* Every 2nd item - Standard Landscape (4:3) */
.masonry-item:nth-child(2n) {
    aspect-ratio: 4/3;
}

/* Every 3rd item - Square (1:1) */
.masonry-item:nth-child(3n) {
    aspect-ratio: 1/1;
}

/* Every 5th item - Tall Portrait (2:3) */
.masonry-item:nth-child(5n) {
    aspect-ratio: 2/3;
}

/* Every 7th item - Cinematic (16:9) */
.masonry-item:nth-child(7n) {
    aspect-ratio: 16/9;
}
