.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;

  pointer-events: none;

}





/* 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;

}