Как уменьшить элемент, чтобы он помещался в размеры мобильного экрана

Я верстаю сайт, у меня на нем есть карусель (owl-carousel) с фото (ширина основного изображения 500px).

Мне нужно чтобы эта карусель помещалась на телефонах (где ширина окна может быть меньше 500px). При задании контейнера с шириной меньше 500px, часть контента просто обрезается.

Каким образом можно уменьшить весь элемент не пытаясь уменьшать по отдельности все его части (так как это сделать трудно)? Возможно есть какое-то простое решение, но я верстаю впервые, поэтому видимо не вижу решения.

1. Карусель которую нужно уменьшить

2. Что происходит когда элемент не вмещается

3. Что происходит когда уменьшается ширина контейнера-родителя