html {
    box-sizing: border-box;
  }
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
      Arial, sans-serif;
  }
  .image-wrap {
    max-width: 100%;
    height: auto;
    margin: auto;
   overflow: hidden; 
    object-fit: cover;
    
  }
  .images {
    display: flex;
    margin: auto;
    padding: 0;
    list-style: none;
    text-align: center;
    animation: slide 70s steps(2000) forwards infinite; 
  }
  @keyframes slide {
    to {
      transform: translateX(-400%);
    }
  }
  .images li {
    width: 33.3333%;
    flex: 1 0 33.3333%;
    max-width: 33.3333%;
    
    padding: 10px;
  }
  .images img {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: cover;
  
    
     /* animation: fade 6s ease-in-out infinite alternate;  */
  }
  .images img:hover {
    transform: scale(1.1); /* Scale up the image slightly */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Add a subtle shadow around the image */
    z-index: 20; /* Bring the hovered image forward */
  }
  
  @keyframes fade {
    0% {
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  
  
  /* below just for testing
  .images {
    counter-reset: section;
  }
  .images li::before {
    counter-increment: section;
    content: "Image " counter(section) ": ";
  }
   */