.gallery-container {
  width: 90%;
  margin: 0 auto;
  padding: 20px 0;
  margin-top: 50px;
}

.gallery-container .row {
  width: 100%;
  margin-top: 5%;
}

.gallery-breadcrumb {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-medium);
  font-size: 14px;
  background: var(--color-primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}

.gallery-breadcrumb a {
  background: var(--color-primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
}

.gallery-breadcrumb a:hover {
  text-decoration: underline;
}

h1 {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-semi-bold);
  font-size: 36px;
  color: var(--color-black-default);
  margin-bottom: 20px;
}

.gallery-item {
  height: 350px;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* width: calc(20% - 20px);
  height: auto;
  position: relative;
  overflow: hidden; 
  transition: transform 0.3s ease; 
  display: flex;
  flex-direction: column; */
}

.gallery-item:hover {
  transform: scale(1.2);
  z-index: 100;
  position: relative; /* Ensure hover element doesn't push others */
  transform-origin: center; /* Scale from the center */
}

.gallery-item img,
.gallery-item .thumbnail {
  width: 100%; /* Lebar 100% dari kontainer */
  height: 200px; /* Tinggi tetap untuk menjaga ukuran gambar konsisten */
  object-fit: cover; /* Memastikan gambar mengisi area tanpa merusak rasio aspek */
}

.gallery-item .description {
  background-color: lightgrey;
  padding: 5px 0px 5px 5px; /* Padding diatur agar lebih sesuai */
  font-size: 10px;
  color: var(--color-black-default);
  text-align: center;
  height: 100px; /* Atur tinggi tetap untuk deskripsi */
  overflow: hidden;
}

.gallery-item .description strong {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-bold);
  color: var(--color-black-default);
  display: block;
  align-items: center;
  padding: 0px 10px 5px 10px; /* Padding: atas, kanan, bawah, kiri */
}

.gallery-item .description p {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-semi-bold);
  color: var(--color-black-default);
  margin: 0;
  overflow: hidden; /* Mencegah overflow teks */
  text-overflow: ellipsis; /* Tambahkan ... jika teks terlalu panjang */
  white-space: nowrap;
}

.gallery-item .extra-text {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-regular);
  text-align: center;
  font-size: 8px;
  color: grey;
  background-color: lightgrey; /* Warna latar belakang yang sama dengan description */
  display: none; /* Tersembunyi awalnya */
}

.gallery-item:hover .description {
  font-size: 10px;
  transform: scale(1);
  z-index: 12;
  padding: 10px 10px 0px 10px;
  border: #333;
  border-width: 4px;
}

.gallery-item:hover .extra-text {
  display: block; /* Tampilkan teks tambahan saat hover */
  padding: 0px 10px 5px 10px; /* Padding: atas, kanan, bawah, kiri */
  overflow: hidden;
  text-overflow: ellipsis;
}

.gallery-pagination {
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-bold);
  display: flex;
  justify-content: center;
  align-items: center;
  list-style-type: none;
  padding: 0;
  margin: 20px 0;
}

.gallery-pagination a,
.gallery-pagination span {
  text-decoration: none;
  display: inline-block;
  margin: 0 5px;
  padding: 8px 12px;
  border: 1px solid lightgrey;
  border-radius: 5px;
  color: #495057;
  font-size: 16px;
  transition: background-color 0.3s, color 0.3s;
}

.gallery-pagination a:hover {
  background-color: #e9ecef;
  color: rgb(75, 168, 222);
}

.gallery-pagination .active {
  background-color: white;
  color: transparent;
  border: 2px solid rgb(21, 103, 123);
  background-image: linear-gradient(
    to right,
    rgb(21, 103, 123) 0%,
    rgb(75, 168, 222) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
}

.gallery-pagination .disabled {
  background-color: #a5acb3af;
  color: #ffffff;
  pointer-events: none;
  border: none;
}

.gallery-pagination .dots {
  padding: 8px 12px;
  color: #6c757d;
  border: none;
}

@media (min-width: 992px) {
  .col-lg-5-col {
    width: 20%;
  }
}