5 Masterclasses

@supports (-webkit-touch-callout: none) {
  .svn-logo-carousel__lijst,
  .svn-logo-carousel__lijst--alt{
    /* Safari tends to behave better with inline-flex here */
    display: inline-flex;

    /* Safari-safe intrinsic width */
    width: -webkit-max-content;
    max-width: none;
  }
}

.svn-logo-carousel__wrapper{
  --visible: 7;
  --gap: var(--content-gap);
  --duration: 220s;

  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}

.svn-logo-carousel__lijst,
.svn-logo-carousel__lijst--alt{
  display: flex;
  flex-direction: row;

  width: max-content;
  max-width: none;                 /* IMPORTANT: not max-content */

  will-change: transform;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}

.svn-logo-carousel__lijst{
  animation: infinite-scroll var(--duration) linear infinite;
}

.svn-logo-carousel__lijst--alt{
  animation: infinite-scroll-right var(--duration) linear infinite;
}

.svn-logo-carousel-list{
  display: flex;
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0 var(--gap) 0 0; /* seam spacing */
  align-items: center;
}

/* slot width based on visible count */
.svn-logo-carousel-item{
  flex: 0 0 calc(
    (100vw - ((var(--visible) - 1) * var(--gap))) / var(--visible)
  );
  
  border-radius: var(--radius-circle);
  background-color: var(--white);
  padding: var(--space-xs) var(--space-s);
  align-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.svn-logo-carousel-item:hover{
   transform: scale(1.05);
  box-shadow: var(--box-shadow-m);
}

.svn-logo-carousel-item__image{
  block-size: 84px;
  inline-size: 100%;
}



/* IMPORTANT: put this keyframes in GLOBAL CSS in Bricks settings */
@keyframes infinite-scroll{
  to { transform: translateX(-50%); }
  
}

@keyframes infinite-scroll-right{
  
  from { transform: translateX(-50%); }
  to { transform: translateX(0%); }
  
}



@media (max-width:1240px) {
  .svn-logo-carousel__wrapper{
  --visible: 4;

}
}


@media (max-width:767px) {
  .svn-logo-carousel__wrapper{
  --visible: 2;

}
}