.container{
  padding: 2rem;
  
  

}
.slider-wrapper{
  position: relative;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  
}
.slider{
  display: flex;
  aspect-ratio:16/9;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  box-shadow: 0 1.5rem 3rem -0.75rem hsla(0,0%,0%,0.25);
  border-radius: 0.5rem;
}
.slider::-webkit-scrollbar{
  display: none;
}

.slider img{
  flex: 1 0 100%;
  scroll-snap-align: start;
  width: 100%;
  object-fit: cover;
  }

.slider-nav{
  display: flex;
  column-gap: 1rem;
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  

}
.slider-nav a{
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.75;
  transition: opacity ease 250ms;
  
}
.slider-nav a:hover{
  opacity: 1;
  
}
.slider-track{
  display: flex;
  width: 600;
  animation: slide 18s infinite;
}
@keyframes slide{
  0%, 10% {
    transform: translateX(0);
  }
  11%, 20% {
    transform: translateX(-100%);
  }
  21%, 30% {
    transform: translateX(-200%);
  }
  31%, 40% {transform: translateX(-300%);
  }
  41%, 50% {
    transform: translateX(-400%);}
  51%, 60% {
    transform: translateX(-500%);
  }
  61%, 70% {
    transform: translateX(-600%);
  }
   71%, 80% {
    transform: translateX(-700%);
  }
   81%, 90% {
    transform: translateX(-800%);
  }
   91%, 100% {
    transform: translateX(-900%);
  }


}