/* Container utama untuk galeri dengan layout masonry */
.gallery-container {
    -webkit-column-count: 3; /* Jumlah kolom untuk Chrome, Safari, Opera */
    -moz-column-count: 3;    /* Jumlah kolom untuk Firefox */
    column-count: 3;         /* Jumlah kolom standar */
    -webkit-column-gap: 15px;
    -moz-column-gap: 15px;
    column-gap: 15px;
}

/* Setiap item dalam galeri */
.gallery-item {
    position: relative; /* Diperlukan agar overlay bisa diposisikan */
    display: inline-block;
    margin-bottom: 15px;
    width: 100%;
    border-radius: 10px; /* Sudut yang sedikit melengkung */
    overflow: hidden;    /* Menyembunyikan bagian gambar yang membesar saat hover */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.gallery-item:hover {
    transform: translateY(-5px); /* Sedikit terangkat saat disentuh mouse */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Gambar di dalam item */
.gallery-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.gallery-item:hover .gallery-image {
    transform: scale(1.1); /* Efek zoom pada gambar saat hover */
}

/* Lapisan overlay yang muncul saat hover */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Teks berada di bawah */
    align-items: flex-start; /* Teks mulai dari kiri */
    padding: 20px;
    opacity: 0; /* Sembunyikan secara default */
    transition: opacity 0.4s ease;
    text-decoration: none; /* Hapus garis bawah dari link */
}

.gallery-item:hover .overlay {
    opacity: 1; /* Tampilkan saat item di-hover */
}

.overlay-text h4 {
    margin: 0;
    font-weight: bold;
    font-size: 1.2em;
    transform: translateY(20px); /* Efek slide dari bawah */
    transition: transform 0.4s ease;
}

.overlay-text p {
    margin: 5px 0 0;
    font-size: 0.9em;
    opacity: 0; /* Sembunyikan deskripsi kecil */
    transform: translateY(20px);
    transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s; /* Transisi dengan sedikit delay */
}

.gallery-item:hover .overlay-text h4,
.gallery-item:hover .overlay-text p {
    transform: translateY(0);
    opacity: 1;
}

/* Membuat galeri responsif untuk layar lebih kecil */
@media (max-width: 992px) {
    .gallery-container {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media (max-width: 576px) {
    .gallery-container {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}