Вертикальная обрезка блока owl carousel

Проблема в вертикальном обрезании блока внутри класса owl-carousel, из-за этого не видно box-shadow, да и вообще блок странно себя ведёт. Использую в связке с bootstrap 5

На изображении, выше проблемной карусели, идентичный блок который выглядит как и должен.

введите сюда описание изображения

Разметка со стилями такая:

        <div class="owl-carousel">

            <div class="stat_item">
                <div class="col-4 col-lg-3">
                    <div class="row text-center">
                        <img class="mb-4" src="/assets/icons/exam.svg" height="50px" alt="">
                        <h2 class="">87%</h2>
                        <p class="mt-3">Middle Exam</p>
                    </div>
                </div>
            </div>

            <div class="stat_item">
                <div class="col-4 col-lg-3">
                    <div class="row text-center">
                        <img class="mb-4" src="/assets/icons/exam.svg" height="50px" alt="">
                        <h2 class="">87%</h2>
                        <p class="mt-3">Middle Exam</p>
                    </div>
                </div>
            </div>

            <div class="stat_item">
                <div class="col-4 col-lg-3">
                    <div class="row text-center">
                        <img class="mb-4" src="/assets/icons/exam.svg" height="50px" alt="">
                        <h2 class="">87%</h2>
                        <p class="mt-3">Middle Exam</p>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

Класс stat_item:

.stat_item{
    box-shadow: rgba(46, 45, 36, 0.15) 0px 0px 6px, rgba(46, 45, 36, 0.15) 0px 3px 6px; 
    border-radius: 8px;
    margin: 0px 30px 0px 30px;
    padding: 20px;
    display: flex;
    justify-content: center;
 }

Ответы (0 шт):