:root{
    --avatar-height: 52px;
    --avatar--width: 52px;
}
.agents_container{
    overflow: hidden;
    display: flex;
    transition: animation-play-state 0.75s ease;
}

.agents_swiper{
    display: flex;
    gap: 8px;
    align-items: center;
    will-change: transform;
    animation: scrolling 64s linear infinite;
}

.agents_container:hover .agents_swiper{
    animation-play-state: paused;
}

.agents_card:not(.avatar){
    padding: 0.75rem clamp(1.25rem, 2vw , 1.5rem);
    border: 1px solid rgba(230, 233, 242, 1);
    white-space: nowrap;
    color: var(--text-color);
    border-radius: 60px;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
}

.agents_card.avatar{
    border-radius: 50%;
    max-width: var(--avatar--width);
    max-height: var(--avatar--height);
}

.agents_card.avatar img{
    width: var(--avatar--width);
    height: var(--avatar--height);
}

a.agents_card:not(.avatar):hover{
    border-color: rgba(240, 242, 248, 1);
    background: rgba(240, 242, 248, 1);
}


@keyframes scrolling {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
}