.slider {
  width: 100%;
  height: 600px; 
  overflow: hidden;
  position: relative;
}
.slides {
  display: flex;
  transition: transform 1s ease-in-out;
  height: 100%;
}
.slide {
  min-width: 100%;
  height: 100%;
  position: relative;
}
.slide img {
  display: block;
  width: 100%;
  height: 100%;
}
.caption {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  width: 100%;
  padding: 10px;
  text-align: center;
}

@media (max-width: 768px) {
  .slide img {
    object-fit: cover;
  }
  .slider {
    height: 300px; 
  }
}
@media (min-width: 769px) {
  .slide img {
    object-fit: contain; 
  }
}