.carousell_wrapper {
    position: relative;
    width: 320px;
    margin: 100px auto 0 auto;
    perspective: 1000px;
  }
  
  .carousell {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(-360deg) translateZ(-300px); /* add reverse transformation from the slides */
    animation: swirl 40s steps(10000, end) infinite; /* run `swirl` animation (defined at end of CSS) infitely, with animation lasting 40 seconds, and 10,000 steps between the FROM and TO values in the animation for a smooth rotation */
  }
  
  .carousell:hover{
    animation-play-state: paused;
  }
  
  .slides {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 300px;
    height: 187px;
  }
  
  .slides button {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 20px 5px 20px;
    color: #fcb102 ;
    border: 1px solid white;
    background-color: transparent !important;
    border-radius: 5px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.5s; 
    
  }
  
  .slides img {
    width: 280px;
    height: 175px;
    border-radius: 10px;
    border: 3px inset rgba(249, 244, 244, 0.954);
    transition: all 0.2s ease-in-out;
   
  }
  
  .slides .carousell-title{
  width: 100%;
  font-size: 27px;
  position: absolute;
  text-align: center;
  margin: auto;
  bottom: 6rem;
  color: #fcb102;
  
  }
  
  
  
  
  .slides img:hover {
    filter: brightness(50%);
  }
  
  .slides:hover img,
  .slides:hover h1 ~ img,
  .slides:hover button ~ img {
    filter: brightness(50%);
  }
  
  .slides:hover button {
    opacity: 1;
  
  }
  
  .slides.one {
    transform: rotateY(0deg) translateZ(200px);
  }
  
  .slides.two {
    transform: rotateY(90deg) translateZ(200px);
  }
  
  .slides.three {
    transform: rotateY(180deg) translateZ(200px);
  }
  
  .slides.four {
    transform: rotateY(270deg) translateZ(200px);
  }
  
  
  
  @keyframes swirl {   
    from {
      transform: rotateY(-360deg);
    }
    to {
      transform: rotateY(0deg);
    }
  } 
  
  @keyframes pause {
    to {
      animation-play-state: paused;
    }
  }