Нужно скрыть часть элемента в слайдере с абсолютным позиционированием

У меня есть сладер (еще не доделанный, т.к ищу ответ на этот вопрос). при нажатии на левую стрелку запускается анимация где блок уезжает за пределы экрана, мне нужно, что бы блок обрезался на определенном моменте. Как это сделать? overflow: hidden не помогает

html:

<div class="menu">
            <img src="img/angle-left.svg" alt="влево" onclick="Left()">
            <div class="slider">
                <div class="variant">
                    <div class="case">
                        <div class="inf"></div>
                        <p>Кейс №1</p>
                    </div>
                    <div class="case">
                        <div class="inf">
                        </div>
                        <p>Кейс №2</p>
                    </div>
                    <div class="case">
                        <div class="inf">
                        </div>
                        <p>Кейс №3</p>
                    </div>
                </div>
                <div class="variant hide">
                
                    <div class="case">
                        <div class="inf">
                        </div>
                        <p>Кейс №4</p>
                    </div>
                    <div class="case">
                        <div class="inf">
                        </div>
                        <p>Кейс №5</p>
                    </div>
                    <div class="case">
                        <div class="inf">
                        </div>
                        <p>Кейс №6</p>
                    </div>
                    
                </div>
                <div class="variant hide">
                    
                    <div class="case">
                        <div class="inf">
                        </div>
                        <p>Кейс №7</p>
                    </div>
                    <div class="case">
                        <div class="inf">
                        </div>
                        <p>Кейс №8</p>
                    </div>
                    <div class="case">
                        <div class="inf">
                        </div>
                        <p>Кейс №9</p>
                    </div>
                </div>
            </div>
            <img src="img/angle-right.svg" alt="вправо">
        </div>

css:

.menu {
display: flex;
flex-flow: row;
justify-content: space-between;
align-items: center;
}
.variant {
    display: flex;
    flex-flow: row nowrap;
    position: absolute;
    overflow: hidden;
}
.menu > img {
    width: 59px;
    height: 59px;
    cursor: pointer;
}
.inf {
    width: 338px;
    height: 310px;
    border-radius: 55px;
    background: #D9D9D9;
    margin-bottom: 20px;
}
.case {
    margin-left: 20px;
    margin-right: 20px;
}
.case > p {
    color: #000;
    text-align: center;
    font-family: "Open Sans";
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.slider {
    width: 1130px;
    height: 305px;
    overflow: hidden;
}
.left {
    animation-duration: 1500ms;
    animation-name: l;
    animation-fill-mode: forwards;
}
@keyframes l {
    from {
        right: 100px;
    }
    to {
        right: 2000px;
    }
}

js

    let Pos = 0
function Left() {
    const VR = document.querySelectorAll('.variant')
    VR[Pos].classList.add('left')
}