.team, .advisory, .partnar{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.scroller{
  max-width: 350px;
}
.scroller__inner{
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

 .scroller[data-animated="true"]{
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent,white 20%,white 80%,transparent);
  mask: linear-gradient(90deg, transparent,white 20%,white 80%,transparent);
 }

 .scroller[data-animated="true"] .scroller__inner{
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll
  var(--_animation-duration,30s)
  var(--_animation-direction,forwards)
  linear 
  infinite;
 }

 .scroller:has(.team__member:hover) .scroller__inner{
  animation-play-state: paused;
 }


 /* .scroller[data-direction="right"] {
   --_animation-direction: reverse;
 }

 .scroller[data-direction="left"] {
   --_animation-direction: forwards;
 } */

 @keyframes scroll{
   to{
    transform: translate(calc(-50% - 0.5rem));
   }
 }


/* Team And Advisory */
.team__member{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 1rem 2rem;
  border-radius: 10px;
  background: var(--clr-white);
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.team__member-img{
  width: 6rem;
  height: 6rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
}

.team__member-details{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


/* Partner */
.partnar img{
  max-width: 6rem;
  aspect-ratio: 1/1;
}





/* xs */
@media (min-width:475px) {
  .scroller{
  max-width: 475px;
}
}

/* sm */
@media (min-width:640px) {
  .scroller{
    max-width: 640px;
  }
    .team__member-img {
    width: 10rem;
    height: 10rem;

  }
}

/* md */
@media (min-width:768px) {
  .scroller{
    max-width: 768px;
 }
}

/* lg */
@media (min-width:1024px) {
  .scroller {
    max-width: 10240px;
  }

  .team__member-img {
    width: 12rem;
    height: 12rem;

  }

}

/* xl */
@media (min-width:1280px) {
  .scroller{
    max-width: 1280px;
  }

}

/* 2xl */
@media (min-width:1536px) {
  .scroller{
    max-width: 1536px;
  }
}