.masonry-grid {

    display: grid;

    gap: 15px;

    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* ✅ Auto-responsive */

}

.masonry-item {

    position: relative;

    overflow: hidden;

    border-radius: 10px;

    transition: transform 0.3s ease-in-out; /* ✅ Smooth Scaling Effect */

}

.masonry-item img {

    object-fit: cover;

    width: 100%;

    height: 120px; /* Adjust as needed */

    transition: transform 0.3s ease-in-out; /* ✅ Image Scaling */

}

/* ✅ Overlay Effect */

.masonry-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.3);

    display: flex;

    align-items: center;

    justify-content: center;

    transition: background 0.3s ease-in-out;

    z-index:9;

}

/* ✅ Title Always Visible (Bright Default State) */

.masonry-overlay h5 {

    font-size: 1.2rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: rgba(255, 255, 255, 0.8) !important;

    transition: color 0.3s ease-in-out;

    z-index:10;

}

/* ✅ Hover Effects */

/* .masonry-item:hover {

    transform: scale(1.05);

} */

.masonry-item:hover img {

    transform: scale(1.2); /* ✅ Image Zooms In */

}

/* .masonry-item:hover .masonry-overlay {

    background: rgba(0, 0, 0, 0.8) !important;

    z-index:9;

} */

/* ✅ Title Becomes Slightly Dimmer on Hover for Better Readability */

.masonry-item:hover .masonry-overlay h5 {

    color: rgba(255, 255, 255, 1) !important;

    z-index:10;

    transition: color 0.3s ease-in-out;

}