.gallery-back {
    position: relative;
    z-index: 2;
    background-image:
      linear-gradient(to bottom, rgba(27, 27, 34, 0.8), rgba(21, 21, 25, 0.8)),
      url('../../img/background.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    border-radius: 10px;
    border-top: 1px solid #F2CD5C;
}

/* Default gallery grid for other counts */
.gallery-grid {
    display: grid;
    width: 100%;
    max-width: 1081px;
    margin: 0 auto;
    gap: 20px;
}

/* 4 items layout - dashboard style */
.gallery-count-4 .gallery-grid {
    grid-template-columns: 1fr 1fr; /* 2 kolom */
    grid-template-rows: auto auto; /* 2 baris */
    gap: 20px;
}

.gallery-count-4 .gallery-item:nth-child(1) { grid-column: 1; grid-row: 1; }
.gallery-count-4 .gallery-item:nth-child(2) { grid-column: 2; grid-row: 1; }
.gallery-count-4 .gallery-item:nth-child(3) { grid-column: 1; grid-row: 2; }
.gallery-count-4 .gallery-item:nth-child(4) { grid-column: 2; grid-row: 2; }

/* Styling gallery-item tetap sama */
.gallery-count-4 .gallery-item img {
    width: 100%;
    height: 220px; /* atau height: auto jika ingin menyesuaikan rasio */
    object-fit: cover;
    border-radius: 10px;
}


/* 5 items layout */
.gallery-count-5 .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "item1 item2"
        "item3 item3"
        "item4 item5";
}

.gallery-count-5 .gallery-item:nth-child(1) {
    grid-area: item1;
}

.gallery-count-5 .gallery-item:nth-child(2) {
    grid-area: item2;
}

.gallery-count-5 .gallery-item:nth-child(3) {
    grid-area: item3;
}

.gallery-count-5 .gallery-item:nth-child(4) {
    grid-area: item4;
}

.gallery-count-5 .gallery-item:nth-child(5) {
    grid-area: item5;
}

/* 6 items layout */
.gallery-count-6 .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-template-areas:
        "item1 item2"
        "item3 item4"
        "item5 item6";
}

.gallery-count-6 .gallery-item:nth-child(1) { grid-area: item1; }
.gallery-count-6 .gallery-item:nth-child(2) { grid-area: item2; }
.gallery-count-6 .gallery-item:nth-child(3) { grid-area: item3; }
.gallery-count-6 .gallery-item:nth-child(4) { grid-area: item4; }
.gallery-count-6 .gallery-item:nth-child(5) { grid-area: item5; }
.gallery-count-6 .gallery-item:nth-child(6) { grid-area: item6; }

/* 7 items layout */
.gallery-count-7 .gallery-grid {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-template-areas:
        "item1 item2 item3"
        "item1 item4 item5"
        "item1 item6 item7";
}

.gallery-count-7 .gallery-item:nth-child(1) { grid-area: item1; }
.gallery-count-7 .gallery-item:nth-child(2) { grid-area: item2; }
.gallery-count-7 .gallery-item:nth-child(3) { grid-area: item3; }
.gallery-count-7 .gallery-item:nth-child(4) { grid-area: item4; }
.gallery-count-7 .gallery-item:nth-child(5) { grid-area: item5; }
.gallery-count-7 .gallery-item:nth-child(6) { grid-area: item6; }
.gallery-count-7 .gallery-item:nth-child(7) { grid-area: item7; }

/* Styling gallery-item */
.gallery-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 10px;
}

/* Overlay */
.gallery-item .overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.gallery-item:hover .overlay {
  opacity: 1;
  pointer-events: auto;
}

.gallery-item img {
    width: 100%;
    height: 220px; /* kurangi dari sebelumnya supaya tidak terlalu tinggi */
    object-fit: cover;
    border-radius: 10px;
    display: block;
    transition: transform 0.3s ease;
}

/* Text content */
.gallery-item .text-content {
    position: absolute;
    left: 15px;
    bottom: 10px;
    color: white;
    pointer-events: none;
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
    max-width: 70%;
}

.gallery-item:hover .text-content {
    transform: translateY(0);
    opacity: 1;
}

.gallery-item .text-content h4 {
    font-size: 16px; /* lebih kecil dari sebelumnya */
    margin-bottom: 3px;
}

.gallery-item .text-content p {
    font-size: 14px; /* lebih kecil dari sebelumnya */
    line-height: 1.2;
    margin: 0;
}

@media (max-width: 600px) {
    .gallery-count-5 .gallery-grid,
    .gallery-count-6 .gallery-grid,
    .gallery-count-7 .gallery-grid {
        display: grid; /* pastikan tetap grid */
        grid-template-columns: 1fr; /* satu kolom */
        grid-auto-rows: auto; /* tinggi menyesuaikan isi */
        gap: 12px;
        grid-template-areas: unset; /* hapus area spesifik */
    }

    .gallery-item {
        height: auto; /* biar tinggi menyesuaikan isi gambar */
    }

    .gallery-item img {
        width: 100%; /* penuh lebar parent */
        height: auto; /* sesuaikan rasio asli */
        object-fit: cover; /* tetap rapih */
        border-radius: 10px;
    }

    .gallery-item .text-content {
        max-width: 90%;
        font-size: 14px;
    }

    .gallery-count-4 .gallery-grid {
        grid-template-columns: 1fr; /* satu kolom */
        grid-auto-rows: auto;
        gap: 12px;
    }

    .gallery-count-4 .gallery-item {
        height: auto;
    }

    .gallery-count-4 .gallery-item img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .gallery-count-4 .gallery-item .text-content {
        max-width: 90%;
        font-size: 14px;
    }
}