悬停在其上时，增加光滑轮播项目的高度和宽度

Question

我正在尝试使用圆滑的传送带制作一些物品的滑块。主要是我希望增加.item div的高度和宽度（我将在其上徘徊）。例如20px。同时，我希望其他.item div的高度和宽度减小。例如20px。我已经尝试了很多方法，但是失败了。

<div class="wrapper border">
    <div class="main-slick">
        <div class="item item-1 p-3 bg-dark text-primary border">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero et magnam aut odit sequi quisquam voluptatem enim dicta nihil
            porro?
        </div>
        <div class="item item-2 p-3 bg-dark text-primary border">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero et magnam aut odit sequi quisquam voluptatem enim dicta nihil
            porro?
        </div>
        <div class="item item-3 p-3 bg-dark text-primary border">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero et magnam aut odit sequi quisquam voluptatem enim dicta nihil
            porro?
        </div>
        <div class="item item-4 p-3 bg-dark text-primary border">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero et magnam aut odit sequi quisquam voluptatem enim dicta nihil
            porro?
        </div>
    </div>
    <button type="button" class="prev">
        prev
    </button>
    <button type="button" class="next">
        next
    </button>
</div>

here is a demo