скользящий слайдер растет экспоненциально на 480px

Question

Я использую скользящий слайдер для веб-сайта, но на адаптивном (ниже 480 пикселей) слайдер не работает.

HTML ниже

<section class="banner-sec-mainpage row text-center">
    <div class="col-lg-8 col-sm-12 col-lg-offset-2">
        <div class="banner-slider">
            <div>
                <h1>Ultimate <strong>Management Software</strong><br />for your business</h1>
            </div>
            <div>
                <h1><strong>Cloud ERP, Manage Your Finance,<br />Human Resources &amp; Projects</strong></h1>
            </div>
            <div>
                <h1><strong>Tax<br /></strong>Management</h1>
            </div>
            <div>
                <h1>Start Your ​<strong>Digital</strong><br />Transformation Journey</h1>
            </div>
        </div>
    </div>
</section>

Конфигурация слайдера: -

$('.banner-slider').slick({
    autoplay: true,
    fade: true,
    dots: false,
    arrows: false
});

CSS

.banner-sec-mainpage{
    padding: 50px 0;
}