* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.gallery-image {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery-image img {
  height: 150px;
  width: 250px;
  transform: scale(1.0);
  transition: transform 0.4s ease;
}

.img-box {
  box-sizing: content-box;
  margin: 2px;
  height: 150px;
  width: 250px;
  overflow: hidden;
  display: inline-block;
  color: white;
  position: relative;
}

/* Caption container covers image */
.caption {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0;
  bottom: 0;
}

/* ✅ H3 always visible at top-left, moved up ~30px */
.caption h3 {
  position: absolute;
  top: -12px; /* originally 8px → moved up ~30px */
  left: 8px;
  opacity: 1;
  color: white;
  font-size: 1.5em;
  line-height: 1.1;
}

/* Hidden by default */
.caption h4,
.caption p {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ✅ H4 center-left, moved up ~15px */
.caption h4 {
  position: absolute;
  top: calc(50% - 15px);
  left: 8px;
  transform: translateY(-50%);
  font-size: 1.2em;
  color: white;
}

/* ✅ P bottom-left, 3 lines height, moved up ~30px */
.caption p {
  position: absolute;
  bottom: 3px; /* originally 8px → moved up ~30px */
  left: 8px;
  right: 8px;
  font-size: 0.8em;
  line-height: 1.0em;
  height: 3em; /* 3 lines reserved */
  overflow: hidden;
  color: white;
}

/* Transparent overlay */
.transparent-box {
  height: 150px;
  width: 250px;
  background-color: rgba(0, 0, 0, 0);
  position: absolute;
  top: 0;
  left: 0;
  transition: background-color 0.3s ease;
}

/* Hover effects */
.img-box:hover img { 
  transform: scale(1.1);
}

.img-box:hover .transparent-box {
  background-color: rgba(0, 0, 0, 0.5);
}

/* ✅ Reveal H4 + P on hover */
.img-box:hover .caption h4,
.img-box:hover .caption p {
  opacity: 1;
}

/* Pointer cursor on hover */
.img-box:hover {
  cursor: pointer;
}

/* Dim text option for second line */
.opacity-low {
  color: #cccccc;
  opacity: 1.0;
}