.masonry-list {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    /* Ensure it has height when empty or absolute children? JS handles height */
}

.masonry-item-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    cursor: pointer;
    border-radius: 8px;
    /* Optional rounded corners */
    transition: transform 0.3s ease;
}

/* Ensure images fill the wrapper */
/* Ensure images fill the wrapper */
.masonry-item-wrapper img {
    width: 100%;
    height: 100%;
    /* Force fill container */
    object-fit: cover;
    /* Crop to fit */
    display: block;
    border-radius: 8px;
    filter: grayscale(100%);
    transition: filter 0.5s ease;
}

.masonry-item-wrapper:hover img {
    filter: grayscale(0%);
}

.masonry-color-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(255, 0, 150, 0.5), rgba(0, 150, 255, 0.5));
    opacity: 0;
    pointer-events: none;
    border-radius: 8px;
    transition: opacity 0.3s ease;
}

/* Container for the effect within the section */
/* Container for the effect within the section */
.backpacker-interaction-container {
    position: absolute;
    top: 10%;
    /* Vertically centered-ish or offset */
    left: 15%;
    /* 30% reduction => 15% margin on each side = 70% width? 100-30 = 70. 15+70+15=100 */
    width: 70%;
    height: 80%;
    /* Reduce height too? User said "size needs to reduce". */
    z-index: 10;
    display: none;
    padding: 0;
}

@media (max-width: 768px) {
    .backpacker-interaction-container {
        width: 95%;
        left: 2.5%;
        /* Center it: (100% - 95%) / 2 */
        top: 5%;
        /* slightly higher up on mobile if needed */
        height: 85%;
        /* slightly taller */
    }
}

.backpacker-interaction-container::-webkit-scrollbar {
    display: none;
}

.backpacker-interaction-container.active {
    display: block;
    /* Masonry needs block to flow */
}


/* Blur effect helper */
.blur-filter {
    filter: blur(10px);
}