* {
    box-sizing: border-box;
 }

 .container-slider {
    width: 90%;
    max-width: 900px;
    margin: auto;
    overflow: hidden;
    box-shadow: 0 0 0 10px black,
                0 15px 50px;
    position: relative;
 }

.slider {
    display: flex;
    width: 500%;
    height: 500px; 
    animation: slider 50s infinite;
 }

 .slider-section {
    width: 100%;
}

.slider-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes slider{
    0% {margin-left: 0;}
    20% {margin-left: 0;}

    25% {margin-left: -100%;}
    45% {margin-left: -100%;}

    50% {margin-left: -200%;}
    70% {margin-left: -200%;}

    75% {margin-left: -300%;}
    100% {margin-left: -300%;}
}

.slider-btn {
   position: absolute; 
   width: 30px;
   height: 30px;
   background: rgba(255, 255, 255, 0.7);
   top: 50%;
   transform: translateY(-50%);
   font-size: 30px;
   font-weight: bold;
   font-family: monospace;
   text-align: center;
   border-radius: 50%;
   cursor: pointer;
}

.slider-btn:hover {
    background: white;
}

.slider.btn.left {
    left: 10px;
}

.slider-btn-right {
    right: 10px;
}