Сделать карусель изображений адаптивной ⇐ CSS

[Anonymous]

Я использую на своем веб-сайте карусель изображений, которую нашел в Интернете, но мне сложнее всего сделать ее адаптивной.
Вот ссылка Codepen на пример проекта:

Код: Выделить всё

Он отлично смотрится на экране компьютера, для которого он, очевидно, и предназначен, но мне бы хотелось, чтобы он работал и на телефоне! Я работал с медиа-запросами, чтобы переупорядочить объекты для экранов меньшего размера, но не могу до конца понять, как это сделать. Мне нужен текст сверху, изображение под ним и стрелки навигации внизу.
Есть какие-нибудь подсказки, как это сделать?
Несмотря на все мои усилия, я не могу понять, как это сделать. чтобы стрелки навигации располагались внизу, чтобы цвет фона, сгенерированный JS-скриптом, не заходил за изображение полностью.
Очень благодарен всем, кто может дать какие-либо подсказки.
Излишне говорить, Я новичок в этом

Подробнее здесь: https://stackoverflow.com/questions/793 ... responsive