.eyee-logoslider-wrapper {
  --color-text: navy;
  --color-bg: papayawhip;
  --color-bg-accent: #ecdcc0;
  --size: clamp(10rem, 1rem + 40vmin, 30rem);
  --gap: 40px;
  --scroll-start: 0;
  --scroll-end: calc(-100% - var(--gap));

  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: auto;
  max-width: 100vw;
  overflow:hidden;
}

.eyee-logoslider-wrapper .marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
}

.eyee-logoslider-wrapper .marquee__group {

  animation: eyee-logoslider-scroll-x var(--duration) linear infinite;

}   

.eyee-logoslider-wrapper .marquee__group .r {
  padding-bottom:15px;
  padding-top:15px;  
  flex-shrink: 0;
  display: flex;
  align-items: center;
  
  gap: var(--gap);
  min-width: 100%;    
}

.eyee-logoslider-wrapper .marquee__group .r.r2 {
    margin-left:-100px;
}

@media (prefers-reduced-motion: reduce) {
  .eyee-logoslider-wrapper .marquee__group {
    animation-play-state: paused;
  }
}

@keyframes eyee-logoslider-scroll-x {
  from {
    transform: translateX(var(--scroll-start));
  }
  to {
    transform: translateX(var(--scroll-end));
  }
}




.eyee-logoslider-wrapper .marquee a:hover {
    box-shadow: 0px 3px 10px 0px #00000026;
    transform: scale(1.02);
}

.eyee-logoslider-wrapper .marquee a img.single {
    filter: grayscale(100%);
    transition: filter 0.2s ease, transform 0.2s ease;
}

.eyee-logoslider-wrapper .marquee a:hover img.single { 
    filter: grayscale(0); 
}





.eyee-logoslider-wrapper .marquee a.logo-item {
  width: 248px;
  height: 100px;
  place-items: center;
  border-radius: 20px;
  display: grid;
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative; /* nodig voor absolute positioning */
  overflow: hidden;
}

.eyee-logoslider-wrapper .marquee .logo-img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  transition: opacity 0.2s ease; /* fade effect */
  position: absolute;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  margin:auto;
}

.eyee-logoslider-wrapper .marquee .logo-img.first {
  opacity: 1;
  z-index: 1;
}

.eyee-logoslider-wrapper .marquee .logo-img.second {
  opacity: 0;
  z-index: 2;
}

.eyee-logoslider-wrapper .marquee a.logo-item:hover .logo-img.first {
  opacity: 0;
}

.eyee-logoslider-wrapper .marquee a.logo-item:hover .logo-img.second {
  opacity: 1;
}


@media (max-width: 767px) {

    .eyee-logoslider-wrapper .marquee a.logo-item {
        width:190px;
        height:80px;
        
    }
   
    .eyee-logoslider-wrapper .marquee a.logo-item img {
        transform: scale(0.85);
        
    }
    
    .eyee-logoslider-wrapper .marquee__group .r {
      
       gap: 20px;
    }
    
    .eyee-logoslider-wrapper .marquee__group .r {
       padding-bottom:10px;
       padding-top:10px;  
    }
    
}