Вертикальная обрезка блока 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;
}
