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