.caption {
	position: relative;
	bottom: 40px;
	left: 0px;
	padding: 8px 12px;
	background-color: rgba(0, 0, 0, 0.5); 
	width: 100%; 
	text-align: center; 
	font-size: 16px;
	color: orange; 
	/* 
	position: absolute;
	bottom: 8px;
	left: 16px;
	*/ 
}

.slider-container {
  position: relative;
  max-width: 900px;
  margin: auto;
  width: 100%;
  aspect-ratio: 16 / 9; /* For responsive height; adjust as needed */
  overflow: hidden;
}

.slide {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; left: 0;
  transition: opacity 1s ease-in-out;
  opacity: 0;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide.active {
  display: block;
  opacity: 1;
  z-index: 2;
}

.fade {
  animation-name: fade;
  animation-duration: 1s;
}

@keyframes fade {
  from { opacity: 0.2; }
  to { opacity: 1; }
}

.slider-btn {
  cursor: pointer;
  position: absolute;
  top: 50%;
	color: white;
  font-size: 24px;
	width: 35px; 
	height: 35px; 
	padding:0,4px,0,4px;
  border: none;
  background: rgba(0,0,0,0.3);
  border-radius: 50%;
  user-select: none;
  transform: translateY(-50%);
  z-index: 3;
  /* 
	padding: 12px;
  */
}

.slider-btn.prev { left: 10px; }
.slider-btn.next { right: 10px; }
.slider-btn:hover { background: rgba(0,0,0,0.6); }

/* On smaller screens, decrease text size */
@media only screen and (max-width: 600px) {
	.caption {font-size: 12px}
}