<div class="slider-container">
  <div class="slider">
    <img src="small-image.jpg" alt="Small Image" class="slider-image" />
    <img src="medium-image.jpg" alt="Medium Image" class="slider-image" />
    <img src="large-image.jpg" alt="Large Image" class="slider-image" />
  </div>
</div>

.slider-container {
  max-width: 100%;
  overflow: hidden;
}

.slider {
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.slider-image {
  height: auto;
  width: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .slider-image {
    height: auto;
    width: 50%;
  }
}

@media (min-width: 1024px) {
  .slider-image {
    height: auto;
    width: 33.33%;
  }
}