Возможно вам подойдут комментарии от соц. сетей. На пример у вконтакте есть такие.
Еще есть как вариант DISQUS

Привет. Я не супер эксперт, но на сколько я знаю нет...
Для примера возьму твой верхний кусок кода

<section class="testimonials">
        <div class="container">
            <div class="testimonials__wrapper">
                <div class="testimonials__wrapper_item">
                    <div class="testimonials__wrapper_item_img">
                        <img src="img/photo/testimonial.png" alt="Q">
                    </div>
                    <div class="testimonials__wrapper_item_text">
                        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.”</p>
                        <h4>Joe Doe</h4>
                    </div>
                </div>

я бы сделал так:

<section class="testimonials">
        <div class="container">
            <div class="testimonials__wrapper">
                <div class="testimonials-item">
                    <div class="testimonials-item__img">
                        <img src="img/photo/testimonial.png" alt="Q">
                    </div>
                    <div class="testimonials-item__text">
                        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.”</p>
                        <h4>Joe Doe</h4>
                    </div>
                </div>

Но учти, что у меня сейчас почти 3 часа ночи, и за меня говорит мой кофе)

если я все правильно понял, то в настройках есть поле "использовать вложенные url"

на сколько я знаю в таких случаях нужно несколько теней через запятую.
например box-shadow: [стили тени 1], [стили тени 2]....
Таким образом удлиняем до нужного размера