/* Container scales to occupy the full col-md-5 column */
.image-gallery {
  width: 100%;
  margin-bottom: 20px;
}

/* Modernized card frame with smooth transition handling */
.main-image-container {
  position: relative;
  width: 100%;
  overflow: hidden; /* Crucial: crops the zoomed image within the frame */
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background-color: #fcfcfc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  cursor: zoom-in;
}

/* Smooth zoom transition */
.main-image {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: center center;
  transition: transform 0.15s ease-out; /* Smooth slide response */
}

/* Scales image on hover */
.main-image-container:hover .main-image {
  transform: scale(2.0); /* Adjust to 1.8 or 2.2 depending on desired zoom intensity */
}

/* Updated Thumbnail strip with modern square cards */
.thumbnail-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.thumb {
  width: 70px;
  height: 70px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.thumb:hover, 
.thumb.active-thumb {
  border-color: #FFC107; /* Matches BEENet's warm branding color */
  transform: translateY(-2px); /* Subtle elevate on hover */
}