Ломается flex вёрстка при подключении Slick slider. Как исправить?

Question

Кирилл @Lirrr

Вёрстка

Ломается flex вёрстка при подключении Slick slider. Как исправить?

HTML

<div class="reviews">
        <div class="container">
            <div class="reviews__inner">
                <div class="reviews__description">
                    <h2 class="reviews__title">What our customers have to say about us.</h2>
                    <p class="reviews__subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p>
                    <button class="reviews__button">Get started</button>
                </div>
                <div class="reviews__cards">

                    <div class="reviews__item">
                        <img src="/img/review-1.png" alt="photo" class="reviews__img">
                        <div class="reviews__card">
                            <div class="card__name">John Doe</div>
                            <div class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</div>
                        </div>
                    </div>

                    <div class="reviews__item">
                        <img src="/img/review-2.png" alt="photo" class="reviews__img">
                        <div class="reviews__card">
                            <div class="card__name">Khalessi</div>
                            <div class="card__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea</div>
                        </div>
                    </div>

CSS

.reviews__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reviews__cards {
    margin-bottom: 70px;
    margin-top: 87px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.reviews__item {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    margin-bottom: 70px;

    
}

.reviews__img {
    width: 60px;
    height: 60px;
    margin-right: 45px;
}

.reviews__card {
    min-height: 150px;
    max-width: 650px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    background-color: #ffffff;
}

.card__name {
    margin: 30px 0px 15px 30px;
    color: #061e37;
    font-size: 18px;
    font-weight: 700;
}

.card__text {
    margin: 0px 30px 30px 30px;
    color: #78909c;
    font-size: 15px;
    line-height: 1.66;
}

Пытаюсь подключить slick слайдер на верстку для такой вертикальной карусели.
Фото верстки:

Код подключения:

$(document).ready(function() {
    $('.reviews__cards').slick({
        slidesToShow: 2,
        vertical: true
      });     
});

После подключения верстка странным образом ломается:

Добавив в css

.slick-slider {
    width: 100%;
    max-width: 720px;

удалось добиться такого вида:

Но фотки с классом reviews__img оказались сверху и его родителю в devtools присваивается display: block; вместо прописанных мною флексов. Как добиться нормальной работы слик слайдера с флексами и решить эту проблему?