Материализация отзывчивой карусели

Question

Я построил карусель с классами Materialize.css. Он отлично работает на настольном компьютере, но я не могу заставить его реагировать.

<!-- HTML -->
<section id="services" class="container center scrollspy">
    <div class="carousel">
        <div class="carousel-item service" href="#one!">
            <i class="material-icons large blue-text text-accent-4">desktop_mac</i>
            <h3>Front-end Development</h3>
            <p>HTML5, CSS3 & JavaScript. <br /> I love to code and bring ideas to life in the browser.</p>
            <ul>
                <li>
                    <i class="material-icons">speed</i>
                    <strong class="blue-text">Performance</strong> 
                    <br /> 
                    Fast load times and lag free interaction are some of my highest priority.
                </li>
                <li>
                    <i class="material-icons">dynamic_feed</i>
                    <strong class="blue-text">Dynamicity</strong>
                    <br />
                    Websites do not have to be static, I like making pages come to life.
                </li>
                <li>
                    <i class="material-icons">code</i>
                    <strong class="blue-text">Clean Code</strong>
                    <br />
                    It is not enough to write a code that works. The source code has to be kept clean over time.
                </li>
            </ul>
        </div>
        <div class="carousel-item service" href="#two!">
            <i class="material-icons large blue-text text-accent-4">devices_other</i>
            <h3>Responsive Websites</h3>
            <p>Media queries & mobile-first frameworks. <br /> My layouts will work on any device: big, medium or small.</p>
            <ul>
                <li>
                    <i class="material-icons">view_compact</i>
                    <strong class="blue-text">Layout</strong>
                    <br />
                    My layouts scale and adapt cleverly, according to the width of the screen where they are shown.
                </li>
                <li>
                    <i class="material-icons">tablet</i>
                    <strong class="blue-text">Smartphones + Tablets</strong>
                    <br />
                    I do not just focus on smartphones; I also take care of tablet's layout
                </li>
                <li>
                    <i class="material-icons">touch_app</i>
                    <strong class="blue-text">Mobile Components</strong>
                    <br />
                    I code: mobile gestures, toasts, dropdown navbars, drag out menu and many others mobile features
                </li>
            </ul>
        </div>
        <div class="carousel-item service" href="#three!">
            <i class="material-icons large blue-text text-accent-4">palette</i>
            <h3>Web Design</h3>
            <p>A solid design is the basis of user experience. <br /> I express my creativity through clean, modern design.</p>
            <ul>
                <li>
                    <i class="material-icons">sentiment_very_satisfied</i>
                    <strong class="blue-text">User Experience</strong>
                    <br />
                    User focused design and usability are my primary goals.
                </li>
                <li>
                    <i class="material-icons">verified_user</i>
                    <strong class="blue-text">Professionality</strong>
                    <br />
                    Every word or phrase must be respectful of the user, honest, and have some engaging quality that makes it intriguing.
                </li>
                <li>
                    <i class="material-icons">view_list</i>
                    <strong class="blue-text">Consistency</strong>
                    <br />
                    Consistency in website design matter a lot. I give my attention to match design elements throughout each of the pages.
                </li>
            </ul>
        </div>
    </div>
</section>

/* CSS */

#services .carousel {
    height: 625px;
    perspective: 600px;
    overflow: visible;
}

#services .carousel .carousel-item {
    width: 400px;
    height: 100%;
    padding: 15px;
}

.service {
    border: #E6ECF8 solid 1px;
    border-radius: 16px;
    box-shadow: 0 5px 5px 0 rgba(233,240,243,0.5), 0 0 0 1px #E6ECF8;
}

.service li i {
    vertical-align: -6px;
} 

.service li {
    margin-bottom: 15px;
}

.service h3 {
    margin-top: 10px;
    font-size: 1.75rem;
    font-weight: 700;
}

.service p {
    font-size: 1.25rem;
    font-weight: 300;
}

Я пытался использовать Media Queries, но не могу найти подходящий способ отображения карусели на мобильных устройствах или планшетах. Я также согласился бы с идеей не показывать карусель на мобильном телефоне и показывать вместо этого плоские элементы (если это строго необходимо), но, опять же, я не знаю, как это сделать.