У slick slider же есть режим «Center Mode». Это прям ваш пример, только там выводится по три сайда, а вам нужно 1. У центрального слайда класс slick-center, на него настраивайте сдвиг по оси и увеличение.
Из-за высокой плотность пикселей современных экранов, CSS-пиксель не равен физическому пикселю, поэтому на самом деле у браузеров на мобильных устройствах (да и на ноутбуках) разрешение гораздо меньше.
Во-первых, вы не тому блоку задаете justify-content:space-around; Если вы хотите, чтобы это срабатывало для пунктов списка, то вы должны задать его для родителя этих пунктов (то есть для ul).
Во -вторых вам надо для .container добавить width: 100%, чтобы было куда растягиваться списку.
А ещё у вас неправильная вложенность в самом списке. Должно быть ul>li>a.
Это происходит из-за того, что у вас у родительского блока .intro__inner стоит flex column, поэтому все дочерние элементы и растягиваются на всю ширину. Поместите кнопки в один блок .intro__btns и для него задайте flex row.
У вас эти карточки лежат в блоке .owl-stage-outer, у которого стоит overflow: hidden;
Если вы уберете у этой карусели у .owl-carousel margin-bottom, и добавите padding-bottom нужного размера для .owl-stage-outer, то карточки не будут обрезаться.
Это естественное поведение при float. Весь текст обтекает картинку, а список — это тоже текст. Для того, чтобы изменит это, вы можете задать ul display: flex;