.card img {
    border: 1px solid #fff;
    border-radius: 15px 15px 15px 15px;
  }

@media(min-width:750px){
    
 .play {
     display:none;
}
    
 .carousel {
    margin: 0 0 50px 5%;
    padding: 0 0;
    max-width: 90%;
    overflow: hidden;
    display: flex;
    mask-image: linear-gradient(to right, transparent, #000 10% 90%, transparent);
  }
    
  .card {
    width: 100%;
    height: auto;
    padding-bottom: 0px;
    

    &:nth-child(1) {
      width: 170px;
      
      
    }

    &:nth-child(2) {
      width: 170px;
      
      
    }

    &:nth-child(3) {
      width: 170px;
      
      
    }
    
    &:nth-child(4) {
      width: 170px;
      
      
    }
    
    &:nth-child(5) {
      width: 170px;
      
      
    }
    
    &:nth-child(6) {
      width: 170px;
      
      
     }
   }
   
   /* Agrupe os cartões para melhorar a estrutura. */
  .group {
    display: flex;
    gap: 30px;
    /* Adicione padding à direita para criar um espaço entre o último e o primeiro cartão. */
    padding-right: 30px;
    margin-left: 0px;
    }
    
    .carousel {
    /* ... */
    &:hover .group {
      animation-play-state: paused;
      cursor:pointer;
     }
   }
   
   @keyframes scrolling {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
     }
   }
 } 
 
 
 @media(max-width:749px){
     
 .play {
    width:25%;
    margin: 0 auto;
    
 }
     
 .carousel {
    margin: 0 0 50px 0;
    padding: 0 0;
    width: 350px;
    overflow: hidden;
    display: flex;
    mask-image: linear-gradient(to right, transparent, #000 7% 93%, transparent);
  }
     
  .card {
    width: 100%;
    height: auto;
    padding-bottom: 0px;
    

    &:nth-child(1) {
      width: 160px;
      
      
    }

    &:nth-child(2) {
      width: 160px;
      
      
    }

    &:nth-child(3) {
      width: 160px;
      
      
    }
    
    &:nth-child(4) {
      width: 160px;
      
      
    }
    
    &:nth-child(5) {
      width: 160px;
      
    }
    
    &:nth-child(6) {
      width: 160px;
      
     }
   }
   
   /* Agrupe os cartões para melhorar a estrutura. */
  .group {
    display: flex;
    gap: 20px;
    /* Adicione padding à direita para criar um espaço entre o último e o primeiro cartão. */
    padding-right: 20px;
    margin-left: 0px;
    }
    
    .carousel {
    /* ... */
    &:hover .group {
      animation-play-state: paused;
      cursor:pointer;
     }
   }
   
   @keyframes scrolling {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
     }
   }
 } 
 
  .carousel {
    /* ... */
    > * {
      flex: 0 0 100%;
    }
  }

  
  .group {
    /* ... */
    will-change: transform; /* Devemos ser gentis com o navegador - informar o que vamos animar. */
    animation: scrolling 15s linear infinite;
  }
  
  
  .carousel:hover .card {
    animation-play-state: paused;
	filter: grayscale(1);
}

 .carousel .card:hover {    
	filter: grayscale(0);
}