
  .matima{
    margin: auto;
   
     }
     
     .slider {
      overflow:hidden;
     height: 250px;
     margin: auto;
     position: relative;
     width: 100%;
     display: grid;
     place-items: center;
     }
     
     .slide-track {
       
     display: flex;
     margin: auto;
     width: 90%;
     animation: scroll 20s linear infinite;
     }
     
     .slide-track:hover {
     animation-play-state: paused;
     }
     
     @keyframes scroll {
     0% {
     transform: translateX(0);
     }
     100% {
     transform: translateX(calc(-250px * 9));
     }
     }
     
     .slide {
     height: 200px;
     width: 250px;
     display: flex;
     align-items: center;
     padding: 15px;
     perspective: 100px;
     }
     
     img {
     width: 100%;
     transition: transform 1s;
     }
     img:hover {
     transform: translateZ(20px);
     }
     
     .matima::before,
     .slider::after {
     background: linear-gradient(to right, rgba(225,225,225,1) 0%, rgba(225,225,225,0) 100%);
     content: '';
     height: 250px;
     position: absolute;
     width: 15%;
     z-index: 2;
     }
     
     .slider::before {
     left: 0;
     top: 0;
     }
     
     .slider::after {
     right: 0;
     top: 0;
     transform: rotateZ(180deg);
     }