/* Gallery Masonry Layout */
.gallery-masonry {
    column-count: 4;
    column-gap: 20px;
    column-fill: balance;
}

@media (max-width: 1200px) {
    .gallery-masonry {
        column-count: 3;
    }
}

@media (max-width: 768px) {
    .gallery-masonry {
        column-count: 2;
    }
}

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

.gallery-masonry-item {
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

.gallery-masonry-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-masonry-item:hover img {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.gallery-masonry-item a {
    display: block;
    text-decoration: none;
}

/* Alternative Flexbox Masonry (if CSS columns don't work well) */
.gallery-masonry-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.gallery-masonry-flex .gallery-masonry-item {
    flex: 1 1 calc(25% - 15px);
    margin-bottom: 0;
}

@media (max-width: 1200px) {
    .gallery-masonry-flex .gallery-masonry-item {
        flex: 1 1 calc(33.333% - 14px);
    }
}

@media (max-width: 768px) {
    .gallery-masonry-flex .gallery-masonry-item {
        flex: 1 1 calc(50% - 10px);
    }
}

@media (max-width: 480px) {
    .gallery-masonry-flex .gallery-masonry-item {
        flex: 1 1 100%;
    }
}

/* Random height variations for masonry effect */
.gallery-masonry-item:nth-child(3n+1) img {
    aspect-ratio: 4/5;
    object-fit: cover;
}

.gallery-masonry-item:nth-child(3n+2) img {
    aspect-ratio: 3/4;
    object-fit: cover;
}

.gallery-masonry-item:nth-child(3n+3) img {
    aspect-ratio: 5/4;
    object-fit: cover;
}

.gallery-masonry-item:nth-child(7n+1) img {
    aspect-ratio: 1/1;
    object-fit: cover;
}

.gallery-masonry-item:nth-child(11n+1) img {
    aspect-ratio: 16/9;
    object-fit: cover;
}