/* Slideshow container */
.slideshow-container {
  position: relative;
  max-width: 70%;
  max-height: 30%;
  margin: auto;
}
 
/* Slides */
.slide {
  display: none;
}

/* Slide captions */
.text {
  position: absolute;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  width: 100%;
  text-align: center;
  padding: 10px;
}

/* Navigation buttons */
.prev, .next {
  position: absolute;
  top: 50%;
  padding: 16px;
  color: white;
  font-weight: bold;
  transition: 0.6s;
  border: none;
  cursor: pointer;
}

.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.prev {
  left: 0;
}

.next {
  right: 0;
}
 

.slide {
  position: relative;
  width: 10%; /* take full width of its parent */
  max-height: 10px;
  padding-bottom: 75%; /* this makes the height equal to the width */
  overflow: hidden;
}

.slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  max-height: 70%;
  object-fit: cover;  /* changed from 'cover' to 'contain' */
}

/* Adjust for various devices using media queries */
@media only screen and (max-width: 480px) {
  .slide {
      /* Adjust slide dimensions for smartphone */
      width: 90%;
      margin: 0 auto; /* center the slide */
  }
}

@media only screen and (min-width: 481px) and (max-width: 1024px) {
  .slide {
      /* Adjust slide dimensions for tablet/pad */
      width: 70%;
      max-height: 60%;
      margin: 0 auto; /* center the slide */
  }
}

@media only screen and (min-width: 1025px) {
  .slide {
      /* Adjust slide dimensions for PC */
      width: 60%;
     max-height: 50%;
      margin: 0 auto; /* center the slide */
  }
}