/* Masonry Container */
.masonry-gallery {
    column-count: 3;
    column-gap: 20px;
    position: relative;
    overflow: hidden;
}

/* Masonry Item */
.masonry-item {
    width: 100%;
    margin-bottom: 20px;
    break-inside: avoid;
    position: relative;
}

.masonry-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45); /* black overlay */
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    z-index: 1;
    border-radius: 40px;
}

.masonry-item:hover::before {
    opacity: 1;
}
/* Image */
.masonry-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .4s ease-in-out;
    border-radius: 40px;
    overflow: hidden;
}

/* Hover Zoom */
.masonry-item a {
    display: block;
    overflow: hidden;
    border-radius: 40px;
    overflow: hidden;
}
.masonry-item:hover img {
    transform: scale(1.08);
}

/* Plus Icon */
.gallery-plus {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--e-global-color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .4s;
    z-index: 2;
}
.masonry-item:hover .gallery-plus {
    opacity: 1;
}
.gallery-plus i {
    color: #fff;
    font-size: 28px;
}

/* Fancybox container overlay effect */
.fancybox__container.custom-bg-overlay {
    background: rgba(0,0,0,0.55);
}

/* Add blur to the overlay background */
.fancybox__container.custom-bg-overlay .fancybox__backdrop {
    backdrop-filter: blur(12px);
    background: rgba(0,0,0,0.55);
}

/* Optional: make image pop */
.fancybox__slide {
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.4));
}
@media(max-width:1024px){

  .masonry-item::before {
      border-radius: 30px;
  }
  /* Image */
  .masonry-item img {
      border-radius: 30px;
  }

  /* Hover Zoom */
  .masonry-item a {
      border-radius: 30px;
  }
}
@media(max-width:767px){
  .masonry-gallery {
      column-count: 1;
      column-gap: 15px;
  }
}