.logo-slider {
   
  $min-image-size: 50px;
  $max-image-size: 100px;
   
  padding: 0px;
  overflow: hidden;
  width: 100%;
  margin: 0 auto; 
  position: relative;
  display: flex;
}

  
  
 .hello { 
    display: flex;
    position: relative;
    animation: marquee 20s linear infinite;
    justify-content: space-around;
   
  }
    .hello hover{
    animation-play-state: paused;
  }
    
  .hello img {
    display: block;
    min-width: var(--image-size);
    height: 180px;
    margin: 0px 5px;
  }
  
  &:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: linear-gradient(to right, white, rgba(white, 0) 80px, rgba(white, 0) calc(100% - 80px), white);
  }
  
  @media (max-width:900px) {
    --image-size: #{$min-image-size};
    --image-size: min(max(#{$min-image-size}, 10vw), #{$max-image-size});
  }



@keyframes marquee {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}
@media (max-width:768px) {
  .h-100{
    height: 80%!important;
  }
  .w-100 {
    width: 66%!important;
  }
  
}