.rkit-gallery-masonry-container {
  width: 100%;
  display: block;
  margin: 0 auto;
}

.rkit-gallery-masonry {

  column-count: 3;
  column-gap: 5px;

  @media (min-width: 768px) {
    column-count: 3;
  }

  @media (min-width: 992px) {
    column-count: 4;
  }

  @media (min-width: 1199px) {
    column-count: 5;
  }

}

.rkit-gallery-masonry.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  background-color: transparent;
  justify-content: center;
}




.brick {
  box-sizing: border-box;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  counter-increment: brick-counter;
  overflow: hidden;
  position: relative;
}



/* Placeholder Skeleton */
/* Gambar Lazy Load */
.gallery_image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition-duration: 900ms;
  transition: transform 0.8s ease;
  left: 0;
}

/* Skeleton Placeholder */
.skeleton {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  opacity: 1;
  position: relative;
}


/* Keyframe Animasi Placeholder */
@keyframes loading {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}


/* .gallery_image  {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
 transition-duration: 900ms; 
  transition: transform 0.8s ease;  
} */

.gallery_image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition-duration: 900ms;
  transition: transform 0.6s ease;
}

.zoom:hover img {
  transform: scale(1.1);
  transition-duration: 900ms;
}



.overlay:hover {
  background-color: rgba(0, 0, 0, 0.5);
  /* semi-transparent black */
  opacity: 0.6;
  transition: opacity 0.6s ease;
}