.image-gallery-container {
  position: relative; /* Keeps absolute elements inside this box */
  display: inline-block; /* Shrinks container to fit the image width */
  width: 100%; /* Allows it to scale with layout */
}

.responsive-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 3. Shared Button Styles */
.nav-btn {
  position: absolute;
  top: 50%; /* Moves top edge to the vertical center */
  transform: translateY(-50%); /* Shifts button up by half its own height for perfect centering */
  
  /* Visual styling (Adjust as needed) */
  background-color: rgba(0, 0, 0, 0.3);
  color: rgba(253, 252, 252, 0.3);
  border: none;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 22px;
  padding-right: 22px;
  font-size: 15px;
  cursor: pointer;
  border-radius: 30px;
  transition: background 0.3s ease;
}

.nav-btn:hover {
  background-color: rgba(0, 0, 0, 0.8);
  color: rgba(253, 252, 252, 1);
}

@media (hover: hover) {
  .nav-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
    color: rgba(253, 252, 252, 1);
  }
}

.nav-btn:active {
  background-color: rgba(0, 0, 0, 0.6);
  color: rgba(253, 252, 252, 0.8);
}

.nav-btn:focus {
  outline: none;
}

/* 4. Individual Button Placements */
.prev-btn {
  left: 10px; /* Sticks to the left side */
}

.next-btn {
  right: 10px; /* Sticks to the right side */
}

.image-gallery-container, .gallery-text-container {
  view-transition-name: gallery-fade-effect;
}

/* Optional: Customize the speed of the cross-fade (default is 0.25s) */
::view-transition-group(gallery-fade-effect) {
  animation-duration:1s;
}