:root{
    --agent-aspect-ratio: 1.74;
}

.agents_column{
    display: flex;
    gap: 2.5rem;
    align-items: start;
}

.agent_column_list{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 0 0 293px;
}

.agent_column_item {
    position: relative;
    padding: 1.1875rem 1.25rem 1.1875rem 1.1875rem;
    border: 1px solid #E6E9F2;
    font-weight: 600;
    font-size: clamp(14px,2vw,15px);
    line-height: clamp(22px,2vw,24px);
    color: var(--heading-color);
    border-radius: 12px;
}

.agent_column_item.with--icon{
    padding: .9375rem 1.25rem .9375rem .9375rem;
}

.agent-flex-arrow-between{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.agent-flex-arrow{
    height: 16px;
    width: 16px;
    color: transparent;
}

.agent_column_item.active{
    border: none;
    background: var(--white);
    overflow: hidden;
    padding: 1rem 1.25rem 1rem 1rem;
}

.agent_column_item.active .agent-flex-arrow{
    color: var(--brand-blue);
}

.agent_column_item:hover{
    cursor: pointer;
    border: none;
    background: var(--white);
    padding: 1rem 1.25rem 1rem 1rem;

    .agent-flex-arrow{
        color: var(--brand-blue);
    }
}

.agent_column_item.active .indicator{
    content: "";
    position: absolute;
    width: 0;
    max-width: 100%;
    height: 2px;
    bottom: 0;
    z-index: 2;
    background: var(--brand-blue);
    left: 0;
    transition: none;
}



img.agent-title-icon{
    height: 32px;
    width: 32px;
}

.agent-title-flex-center{
    display: flex;
    gap: 12px;
    align-items: center;
}

.agent_column_images{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 560px;
    border-radius: 20px;
}

.agent_column_image{
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateX(60px);
    transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .45s;
    user-select: none;
    border-radius: 20px;
    z-index: 1;
}

.agent_column_image a,
.agent_column_image img{
    width: 100%;
    height: 100%;
}

.agent_column_image img{
    border-radius: 20px;
    position: relative;
    /* object-fit: cover; */
    /* object-position: center; */
}

.agent_column_image.current { opacity: 1; transform: translateX(0); z-index: 2;}
.agent_column_image.leave { opacity: 0; transform: translateX(-60px); z-index: 1p;}

@media (max-width: 1350px) {
    .agents_column{
        gap: 1.5rem;
        align-items: stretch;
    }

    .agent_column_images{
        height: 424px
    }

}

@media (max-width: 1024px) {
    .agents_column{
        gap: 2.5rem;
        flex-direction: column;
        align-items: start;
    }

    .agent_column_images{
        height: calc(calc(100vw - 2rem) / var(--agent-aspect-ratio));
    }

    .agent_column_image{
       height: 100%;
    }

    .agent_column_list{
        flex-direction: row;
        flex: unset;
        width: 100vw;
        overflow-x: auto;
        margin: 0 calc(-1 * 2rem);
        padding: 0 2rem;
        .agent_column_item{
            min-width: 260px;
            width: 100%;
            white-space: nowrap;
        }
    }


}

@media (max-width: 991px) {
    .agents_column{
        gap: 2rem;
        flex-direction: column;
        align-items: start;
    }

    .agent_column_list{
        flex-direction: row;
        flex: unset;
        width: 100vw;
        overflow-x: auto;
        margin: 0 calc(-1 * 1rem);
        padding: 0 1rem;
        .agent_column_item{
            min-width: 260px;
            width: 100%;
            white-space: nowrap;
        }
    }

}

/* @media (max-width: 900px) {
    .agent_column_image{
        aspect-ratio: 1.75;
    }
}

@media (max-width: 768px) {
    .agent_column_image{
        aspect-ratio: 1.74108;
    }
} */