.grid-container {
  display: grid;
  gap: 10px;
  padding: 10px;
  height: 800px; /* fix height agar area cukup */
}

/* === 1 gambar === */
.grid-container.grid-count-1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas:
    "gambar1";
}
.grid-container.grid-count-1 .img-1 {
  grid-area: gambar1;
}

/* === 2 gambar === (atas bawah) */
.grid-container.grid-count-2 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "gambar1"
    "gambar2";
}
.grid-container.grid-count-2 .img-1 { grid-area: gambar1; }
.grid-container.grid-count-2 .img-2 { grid-area: gambar2; }

/* === 3 gambar === */
.grid-container.grid-count-3 {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-template-areas:
    "gambar1 gambar2 gambar3";
}
.grid-container.grid-count-3 .img-1 { grid-area: gambar1; }
.grid-container.grid-count-3 .img-2 { grid-area: gambar2; }
.grid-container.grid-count-3 .img-3 { grid-area: gambar3; }

/* === 4 gambar === */
.grid-container.grid-count-4 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-template-areas:
    "gambar1 gambar2"
    "gambar3 gambar4";
}
.grid-container.grid-count-4 .img-1 { grid-area: gambar1; }
.grid-container.grid-count-4 .img-2 { grid-area: gambar2; }
.grid-container.grid-count-4 .img-3 { grid-area: gambar3; }
.grid-container.grid-count-4 .img-4 { grid-area: gambar4; }

/* === 5 sampai 10 gambar === */
/* kamu bisa pakai layout yang sudah kamu punya tadi */
.grid-container.grid-count-5,
.grid-container.grid-count-6,
.grid-container.grid-count-7,
.grid-container.grid-count-8,
.grid-container.grid-count-9,
.grid-container.grid-count-10 {
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 200px);
  grid-template-areas:
    "gambar1 gambar1 gambar2 gambar2 gambar3"
    "gambar4 gambar4 gambar2 gambar2 gambar5"
    "gambar6 gambar7 gambar7 gambar8 gambar8"
    "gambar6 gambar7 gambar7 gambar9 gambar10";
}
.grid-container.grid-count-5 .img-1,
.grid-container.grid-count-6 .img-1,
.grid-container.grid-count-7 .img-1,
.grid-container.grid-count-8 .img-1,
.grid-container.grid-count-9 .img-1,
.grid-container.grid-count-10 .img-1 { grid-area: gambar1; }

.grid-container.grid-count-5 .img-2,
.grid-container.grid-count-6 .img-2,
.grid-container.grid-count-7 .img-2,
.grid-container.grid-count-8 .img-2,
.grid-container.grid-count-9 .img-2,
.grid-container.grid-count-10 .img-2 { grid-area: gambar2; }

.grid-container.grid-count-5 .img-3,
.grid-container.grid-count-6 .img-3,
.grid-container.grid-count-7 .img-3,
.grid-container.grid-count-8 .img-3,
.grid-container.grid-count-9 .img-3,
.grid-container.grid-count-10 .img-3 { grid-area: gambar3; }

.grid-container.grid-count-5 .img-4,
.grid-container.grid-count-6 .img-4,
.grid-container.grid-count-7 .img-4,
.grid-container.grid-count-8 .img-4,
.grid-container.grid-count-9 .img-4,
.grid-container.grid-count-10 .img-4 { grid-area: gambar4; }

.grid-container.grid-count-5 .img-5,
.grid-container.grid-count-6 .img-5,
.grid-container.grid-count-7 .img-5,
.grid-container.grid-count-8 .img-5,
.grid-container.grid-count-9 .img-5,
.grid-container.grid-count-10 .img-5 { grid-area: gambar5; }

.grid-container.grid-count-6 .img-6,
.grid-container.grid-count-7 .img-6,
.grid-container.grid-count-8 .img-6,
.grid-container.grid-count-9 .img-6,
.grid-container.grid-count-10 .img-6 { grid-area: gambar6; }

.grid-container.grid-count-7 .img-7,
.grid-container.grid-count-8 .img-7,
.grid-container.grid-count-9 .img-7,
.grid-container.grid-count-10 .img-7 { grid-area: gambar7; }

.grid-container.grid-count-8 .img-8,
.grid-container.grid-count-9 .img-8,
.grid-container.grid-count-10 .img-8 { grid-area: gambar8; }

.grid-container.grid-count-9 .img-9,
.grid-container.grid-count-10 .img-9 { grid-area: gambar9; }

.grid-container.grid-count-10 .img-10 { grid-area: gambar10; }

/* Item wrapper */
.grid-container > div {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #eee;
}

/* Gambar */
.grid-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay */
.overlay-textgallery {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.35), transparent 60%);
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* kiri bawah */
  justify-content: flex-end;
  pointer-events: none;
  padding: 18px;
}

/* Title muncul dari bawah kiri */
.overlay-textgallery h5 {
  margin: 0 0 6px 0;
  color: #fff;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .35s ease-in-out, transform .35s ease-in-out;
  font-weight: bold;
}

/* Caption muncul setelah title */
.overlay-textgallery p {
  margin: 0;
  color: #fff;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .35s ease-in-out, transform .35s ease-in-out;
  font-size: 0.95em;
  font-weight: 300;
}

/* Hover: munculkan title dan caption dari bawah kiri */
.grid-container > div:hover .overlay-textgallery h5,
.grid-container > div:hover .overlay-textgallery p {
  opacity: 1;
  transform: translateY(0) translateX(0);
}