/* Slideshow container */
.slideshow-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Do NOT fix height here; height will adjust */
}

.full-img {
  position: relative;
  width: 100%;
  max-height: 800px; /* max visible height */
  display: flex;
  align-items: center;
  justify-content: center;
}

.full-img img {
  max-height: 800px !important; /* limit image height */
  max-width: 100% !important;
  width: auto !important;       /* maintain aspect ratio */
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Next & previous buttons */
.slide-wrapper {
  position: relative;
  display: inline-block; /* shrink-wrap to image width */
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  padding: 16px;
  font-size: 24px;
  font-weight: bold;
  color: #005de9;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 3px;
  user-select: none;
  z-index: 10;
}

.prev {
  left: 0; /* positioned at image's left edge */
}

.next {
  right: 0; /* positioned at image's right edge */
}

.prev:hover, .next:hover {
  background-color: #f1f1f1;
  color: black;
}

.full-img {
  position: relative; /* positioning context for buttons */
  display: inline-block; /* size tightly to content (image) */
  max-height: 800px;    /* keep max height limit */
  width: auto;          /* let width adjust to image */
}

.full-img img {
  max-height: 800px !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Position buttons relative to .full-img */
.full-img .prev,
.full-img .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  padding: 16px;
  font-weight: bold;
  font-size: 24px;
  user-select: none;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 3px;
  color: #005de9;
  z-index: 10;
}

.full-img .prev {
  left: 0; /* left edge of image */
}

.full-img .next {
  right: 0;  /* right edge of image */
}

.full-img .prev:hover,
.full-img .next:hover {
  background-color: #f1f1f1;
  color: black;
}