Вертикальное перелистывание блоков с эффектом наложения друг на друга

<div class="category">
    <div class="container">
        <div class="content-title"><h2>Текущие проекты</h2></div>
        <div class="category_cont">
            <a class="cat-item miniature" href="">
                <div class="text">
                    <div class="title-block">ЖК Гвардейский</div>
                    <p>Современный комплекс, расположенный в северо-западной части города в экологически чистом, тихом и безопасном месте.</p>
                    <div class="adres">Ленинский р-н, микрорайон Юрьевец</div>
                    <div class="price">от 3 814 000 руб</div>
                    <div class="btn btn-border"><span>Подробнее</span></div>
                </div>
                <img src="https://test5.danilsmg.ru/wp-content/uploads/2025/12/ChatGPT-Image-22-дек.-2025-г.-15_46_44.png" alt="">
            </a>
            <a class="cat-item miniature" href="">
                <div class="text">
                    <div class="title-block">ЖК Гвардейский 2.0</div>
                    <p>Современный комплекс, расположенный в северо-западной части города в экологически чистом, тихом и безопасном месте.</p>
                    <div class="adres">Ленинский р-н, микрорайон Юрьевец</div>
                    <div class="price">от 3 814 000 руб</div>
                    <div class="btn btn-border"><span>Подробнее</span></div>
                </div>
                <img src="https://test5.danilsmg.ru/wp-content/uploads/2025/12/ChatGPT-Image-22-дек.-2025-г.-15_59_12.png" alt="">
            </a>
            <a class="cat-item miniature" href="">
                <div class="text">
                    <div class="title-block">ЖК Отражение</div>
                    <p>Современный комплекс, расположенный в северо-западной части города в экологически чистом, тихом и безопасном месте.</p>
                    <div class="adres">Ленинский р-н, микрорайон Юрьевец</div>
                    <div class="price">от 3 814 000 руб</div>
                    <div class="btn btn-border"><span>Подробнее</span></div>
                </div>
                <img src="https://test5.danilsmg.ru/wp-content/uploads/2025/12/ChatGPT-Image-22-дек.-2025-г.jpg" alt="">
            </a>
            <a class="banner-rem cat-item miniature" href="">
                <div class="text">
                    <div class="action-text">Ремонт входит в ипотеку!</div>
                    <div class="content-title">Сделаем для вас ремонт <br>и отделку помещения под ключ</div>
                    <p>Берём на себя все этапы ремонта: от подготовки и инженерных работ до финишной отделки. Вы получаете готовое помещение, полностью готовое к эксплуатации — в оговорённые сроки и по зафиксированной смете.</p>
                    <p>Нам не стыдно за свою работу!</p>
                    <div class="price">от 7938  ₽/м2</div>
                    <div class="btn btn-black"><span>Посмотреть портфолио</span></div>
                </div>
                <img src="https://test5.danilsmg.ru/wp-content/uploads/2025/12/bg-form-rem.jpg" alt="">
            </a>
        </div>

        <div class="btns-big flex_block">
            <a class="btn-big-item title-block btn-calc" href=""><span>Посчитать ипотеку</span></a>
            <a class="btn-big-item title-block btn-action" href=""><span>Посмотреть акции</span></a>
        </div>
    </div>
</div>

.cat-item{
    position: relative;
    border-radius: 20px;
    aspect-ratio: 10 / 5;
    display: block;
    margin-bottom: 20px;
    
    position: sticky;
    top: 80px;
    background: @bg;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;

    .text{
        padding: 20px;
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 10;
        background: rgba(0, 0, 0, 0.404);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 20px;
        box-sizing: border-box;
        width: 570px;
        color: @w;

        p{
            color: @w;
        }
        .adres{
            margin-top: 10px;
            padding-left: 20px;
            background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDVkZTAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1tYXAtcGluLWljb24gbHVjaWRlLW1hcC1waW4iPjxwYXRoIGQ9Ik0yMCAxMGMwIDQuOTkzLTUuNTM5IDEwLjE5My03LjM5OSAxMS43OTlhMSAxIDAgMCAxLTEuMjAyIDBDOS41MzkgMjAuMTkzIDQgMTQuOTkzIDQgMTBhOCA4IDAgMCAxIDE2IDAiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjEwIiByPSIzIi8+PC9zdmc+") no-repeat 0 1.5px;
        }
        .price{
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            font-weight: 500;
            margin-bottom: 10px;
        }
        .btn{
            &:hover{
                background: @color-1;
                border-color: @color-1;
            }
        }
    }
    img{
        position: absolute;
        left: 0;
        top: 0;
    }
}