Onboarding Carousel

<div class="onboarding-carousel carousel carousel--dark carousel--equal-height-slides">
    <div class="onboarding-carousel-wrap">
        <div class="onboarding-carousel-wrap__inner">
            <div class="onboarding-carousel-component-title">
                <h2 class="onboarding-carousel-component-title__inner">
                    Onboarding<br />
                    To-Dos
                </h2>
            </div>
            <div class="onboarding-carousel-carousel js-onboarding-carousel">
                <div class="onboarding-carousel__list js-onboarding-cards">
                    <!-- Card 1 -->
                    <div class="onboarding-carousel__item is-active">
                        <a href="#" class="onboarding-carousel__link js-onboarding-card" data-target="panel-0">
                            <div class="onboarding-carousel__number">01</div>
                            <div class="onboarding-carousel__title">Lorem Ipsum</div>
                            <div class="onboarding-carousel__dates">Day #-##</div>
                            <div class="onboarding-carousel__desc">Consectetur adipiscing elit sed do eiusmod.</div>
                        </a>
                    </div>
                    <!-- /Card 1 -->

                    <!-- Card 2 -->
                    <div class="onboarding-carousel__item">
                        <a href="#" class="onboarding-carousel__link js-onboarding-card" data-target="panel-1">
                            <div class="onboarding-carousel__number">02</div>
                            <div class="onboarding-carousel__title">Similique Fugiat Alias</div>
                            <div class="onboarding-carousel__dates">Day #-##</div>
                            <div class="onboarding-carousel__desc">Repudiandae illo sunt dolor dignissimos doloremque</div>
                        </a>
                    </div>
                    <!-- /Card 2 -->

                    <!-- Card 3 -->
                    <div class="onboarding-carousel__item">
                        <a href="#" class="onboarding-carousel__link js-onboarding-card" data-target="panel-2">
                            <div class="onboarding-carousel__number">03</div>
                            <div class="onboarding-carousel__title">Lorem Ipsum</div>
                            <div class="onboarding-carousel__dates">Day #-##</div>
                            <div class="onboarding-carousel__desc">Consectetur adipiscing elit sed do eiusmod.</div>
                        </a>
                    </div>
                    <!-- /Card 3 -->

                    <!-- Card 4 -->
                    <div class="onboarding-carousel__item">
                        <a href="#" class="onboarding-carousel__link js-onboarding-card" data-target="panel-3">
                            <div class="onboarding-carousel__number">04</div>
                            <div class="onboarding-carousel__title">Similique Fugiat Alias</div>
                            <div class="onboarding-carousel__dates">Day #-##</div>
                            <div class="onboarding-carousel__desc">Repudiandae illo sunt dolor dignissimos doloremque</div>
                        </a>
                    </div>
                    <!-- /Card 4 -->

                    <!-- Card 5 -->
                    <div class="onboarding-carousel__item">
                        <a href="#" class="onboarding-carousel__link js-onboarding-card" data-target="panel-4">
                            <div class="onboarding-carousel__number">05</div>
                            <div class="onboarding-carousel__title">Lorem Ipsum</div>
                            <div class="onboarding-carousel__dates">Day #-##</div>
                            <div class="onboarding-carousel__desc">Consectetur adipiscing elit sed do eiusmod.</div>
                        </a>
                    </div>
                    <!-- /Card 5 -->

                    <!-- Card 6 -->
                    <div class="onboarding-carousel__item">
                        <a href="#" class="onboarding-carousel__link js-onboarding-card" data-target="panel-5">
                            <div class="onboarding-carousel__number">06</div>
                            <div class="onboarding-carousel__title">Similique Fugiat Alias</div>
                            <div class="onboarding-carousel__dates">Day #-##</div>
                            <div class="onboarding-carousel__desc">Repudiandae illo sunt dolor dignissimos doloremque</div>
                        </a>
                    </div>
                    <!-- /Card 6 -->

                    <!-- Card 7 -->
                    <div class="onboarding-carousel__item">
                        <a href="#" class="onboarding-carousel__link js-onboarding-card" data-target="panel-6">
                            <div class="onboarding-carousel__number">07</div>
                            <div class="onboarding-carousel__title">Lorem Ipsum</div>
                            <div class="onboarding-carousel__dates">Day #-##</div>
                            <div class="onboarding-carousel__desc">Consectetur adipiscing elit sed do eiusmod.</div>
                        </a>
                    </div>
                    <!-- /Card 7 -->

                    <!-- Card 8 -->
                    <div class="onboarding-carousel__item">
                        <a href="#" class="onboarding-carousel__link js-onboarding-card" data-target="panel-7">
                            <div class="onboarding-carousel__number">08</div>
                            <div class="onboarding-carousel__title">Similique Fugiat Alias</div>
                            <div class="onboarding-carousel__dates">Day #-##</div>
                            <div class="onboarding-carousel__desc">Repudiandae illo sunt dolor dignissimos doloremque</div>
                        </a>
                    </div>
                    <!-- /Card 8 -->

                    <!-- Card 9 -->
                    <div class="onboarding-carousel__item">
                        <a href="#" class="onboarding-carousel__link js-onboarding-card" data-target="panel-8">
                            <div class="onboarding-carousel__number">09</div>
                            <div class="onboarding-carousel__title">Lorem Ipsum</div>
                            <div class="onboarding-carousel__dates">Day #-##</div>
                            <div class="onboarding-carousel__desc">Consectetur adipiscing elit sed do eiusmod.</div>
                        </a>
                    </div>
                    <!-- /Card 9 -->
                </div>
            </div>
        </div>
    </div>

    <div class="onboarding-carousel__panels">
        <!-- Panel 1 -->
        <div class="onboarding-carousel__panel js-onboarding-panel is-active" id="panel-0">
            <h3 class="onboarding-carousel__panel-title">
                <span class="onboarding-carousel__panel-number">01</span>
                Lorem Ipsum
            </h3>
            <div class="onboarding-carousel__panel-wrap">
                <div class="onboarding-carousel__panel-main">
                    <h4 class="onboarding-carousel__panel-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, reprehenderit quae. Eos sint quo numquam, eum incidunt consectetur similique mollitia!</p>
                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </p>

                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor sit amet
                            <i class="fa fa-external-link"></i>
                        </a>
                    </p>

                    <h4 class="onboarding-carousel__panel-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, reprehenderit quae. Eos sint quo numquam, eum incidunt consectetur similique mollitia!</p>
                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </p>

                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor sit amet
                            <i class="fa fa-external-link"></i>
                        </a>
                    </p>
                </div>

                <div class="onboarding-carousel__panel-sidebar">
                    <div class="onboarding-carousel__panel-card">
                        <img src="/images/photos/2.jpg" alt="" class="img-responsive" />

                        <div class="onboarding-carousel__panel-card-body">
                            <h5 class="onboarding-carousel__panel-card-title">Tenetur dicta provident aliquid quod inventore fugit!</h5>

                            <div class="onboarding-carousel__panel-card-content">
                                <p>Exercitationem soluta esse cum libero minus veritatis! Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
                            </div>

                            <div class="onboarding-carousel__panel-card-actions">
                                <a href="#" class=""
                                    >Lorem ipsum dolor sit
                                    <i class="fa fa-long-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Panel 1 -->

        <!-- Panel 2 -->
        <div class="onboarding-carousel__panel js-onboarding-panel" id="panel-1">
            <h3 class="onboarding-carousel__panel-title">
                <span class="onboarding-carousel__panel-number">02</span>
                Similique Fugiat Alias
            </h3>
            <div class="onboarding-carousel__panel-wrap">
                <div class="onboarding-carousel__panel-main">
                    <h4 class="onboarding-carousel__panel-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, reprehenderit quae. Eos sint quo numquam, eum incidunt consectetur similique mollitia!</p>
                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </p>

                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor sit amet
                            <i class="fa fa-external-link"></i>
                        </a>
                    </p>

                    <h4 class="onboarding-carousel__panel-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, reprehenderit quae. Eos sint quo numquam, eum incidunt consectetur similique mollitia!</p>
                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </p>

                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor sit amet
                            <i class="fa fa-external-link"></i>
                        </a>
                    </p>
                </div>

                <div class="onboarding-carousel__panel-sidebar">
                    <div class="onboarding-carousel__panel-card">
                        <img src="/images/photos/3.jpg" alt="" class="img-responsive" />

                        <div class="onboarding-carousel__panel-card-body">
                            <h5 class="onboarding-carousel__panel-card-title">Tenetur dicta provident aliquid quod inventore fugit!</h5>

                            <div class="onboarding-carousel__panel-card-content">
                                <p>Exercitationem soluta esse cum libero minus veritatis! Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
                            </div>

                            <div class="onboarding-carousel__panel-card-actions">
                                <a href="#" class=""
                                    >Lorem ipsum dolor sit
                                    <i class="fa fa-long-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Panel 2 -->

        <!-- Panel 3 -->
        <div class="onboarding-carousel__panel js-onboarding-panel" id="panel-2">
            <h3 class="onboarding-carousel__panel-title">
                <span class="onboarding-carousel__panel-number">03</span>
                Lorem Ipsum
            </h3>
            <div class="onboarding-carousel__panel-wrap">
                <div class="onboarding-carousel__panel-main">
                    <h4 class="onboarding-carousel__panel-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, reprehenderit quae. Eos sint quo numquam, eum incidunt consectetur similique mollitia!</p>
                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </p>

                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor sit amet
                            <i class="fa fa-external-link"></i>
                        </a>
                    </p>

                    <h4 class="onboarding-carousel__panel-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, reprehenderit quae. Eos sint quo numquam, eum incidunt consectetur similique mollitia!</p>
                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </p>

                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor sit amet
                            <i class="fa fa-external-link"></i>
                        </a>
                    </p>
                </div>

                <div class="onboarding-carousel__panel-sidebar">
                    <div class="onboarding-carousel__panel-card">
                        <img src="/images/photos/4.jpg" alt="" class="img-responsive" />

                        <div class="onboarding-carousel__panel-card-body">
                            <h5 class="onboarding-carousel__panel-card-title">Tenetur dicta provident aliquid quod inventore fugit!</h5>

                            <div class="onboarding-carousel__panel-card-content">
                                <p>Exercitationem soluta esse cum libero minus veritatis! Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
                            </div>

                            <div class="onboarding-carousel__panel-card-actions">
                                <a href="#" class=""
                                    >Lorem ipsum dolor sit
                                    <i class="fa fa-long-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Panel 3 -->

        <!-- Panel 4 -->
        <div class="onboarding-carousel__panel js-onboarding-panel" id="panel-3">
            <h3 class="onboarding-carousel__panel-title">
                <span class="onboarding-carousel__panel-number">04</span>
                Similique Fugiat Alias
            </h3>
            <div class="onboarding-carousel__panel-wrap">
                <div class="onboarding-carousel__panel-main">
                    <h4 class="onboarding-carousel__panel-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, reprehenderit quae. Eos sint quo numquam, eum incidunt consectetur similique mollitia!</p>
                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </p>

                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor sit amet
                            <i class="fa fa-external-link"></i>
                        </a>
                    </p>

                    <h4 class="onboarding-carousel__panel-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, reprehenderit quae. Eos sint quo numquam, eum incidunt consectetur similique mollitia!</p>
                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </p>

                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor sit amet
                            <i class="fa fa-external-link"></i>
                        </a>
                    </p>
                </div>

                <div class="onboarding-carousel__panel-sidebar">
                    <div class="onboarding-carousel__panel-card">
                        <img src="/images/photos/5.jpg" alt="" class="img-responsive" />

                        <div class="onboarding-carousel__panel-card-body">
                            <h5 class="onboarding-carousel__panel-card-title">Tenetur dicta provident aliquid quod inventore fugit!</h5>

                            <div class="onboarding-carousel__panel-card-content">
                                <p>Exercitationem soluta esse cum libero minus veritatis! Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
                            </div>

                            <div class="onboarding-carousel__panel-card-actions">
                                <a href="#" class=""
                                    >Lorem ipsum dolor sit
                                    <i class="fa fa-long-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Panel 4 -->

        <!-- Panel 5 -->
        <div class="onboarding-carousel__panel js-onboarding-panel" id="panel-4">
            <h3 class="onboarding-carousel__panel-title">
                <span class="onboarding-carousel__panel-number">05</span>
                Lorem Ipsum
            </h3>
            <div class="onboarding-carousel__panel-wrap">
                <div class="onboarding-carousel__panel-main">
                    <h4 class="onboarding-carousel__panel-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, reprehenderit quae. Eos sint quo numquam, eum incidunt consectetur similique mollitia!</p>
                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </p>

                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor sit amet
                            <i class="fa fa-external-link"></i>
                        </a>
                    </p>

                    <h4 class="onboarding-carousel__panel-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, reprehenderit quae. Eos sint quo numquam, eum incidunt consectetur similique mollitia!</p>
                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </p>

                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor sit amet
                            <i class="fa fa-external-link"></i>
                        </a>
                    </p>
                </div>

                <div class="onboarding-carousel__panel-sidebar">
                    <div class="onboarding-carousel__panel-card">
                        <img src="/images/photos/6.jpg" alt="" class="img-responsive" />

                        <div class="onboarding-carousel__panel-card-body">
                            <h5 class="onboarding-carousel__panel-card-title">Tenetur dicta provident aliquid quod inventore fugit!</h5>

                            <div class="onboarding-carousel__panel-card-content">
                                <p>Exercitationem soluta esse cum libero minus veritatis! Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
                            </div>

                            <div class="onboarding-carousel__panel-card-actions">
                                <a href="#" class=""
                                    >Lorem ipsum dolor sit
                                    <i class="fa fa-long-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Panel 5 -->

        <!-- Panel 6 -->
        <div class="onboarding-carousel__panel js-onboarding-panel" id="panel-5">
            <h3 class="onboarding-carousel__panel-title">
                <span class="onboarding-carousel__panel-number">06</span>
                Similique Fugiat Alias
            </h3>
            <div class="onboarding-carousel__panel-wrap">
                <div class="onboarding-carousel__panel-main">
                    <h4 class="onboarding-carousel__panel-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, reprehenderit quae. Eos sint quo numquam, eum incidunt consectetur similique mollitia!</p>
                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </p>

                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor sit amet
                            <i class="fa fa-external-link"></i>
                        </a>
                    </p>

                    <h4 class="onboarding-carousel__panel-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, reprehenderit quae. Eos sint quo numquam, eum incidunt consectetur similique mollitia!</p>
                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </p>

                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor sit amet
                            <i class="fa fa-external-link"></i>
                        </a>
                    </p>
                </div>

                <div class="onboarding-carousel__panel-sidebar">
                    <div class="onboarding-carousel__panel-card">
                        <img src="/images/photos/7.jpg" alt="" class="img-responsive" />

                        <div class="onboarding-carousel__panel-card-body">
                            <h5 class="onboarding-carousel__panel-card-title">Tenetur dicta provident aliquid quod inventore fugit!</h5>

                            <div class="onboarding-carousel__panel-card-content">
                                <p>Exercitationem soluta esse cum libero minus veritatis! Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
                            </div>

                            <div class="onboarding-carousel__panel-card-actions">
                                <a href="#" class=""
                                    >Lorem ipsum dolor sit
                                    <i class="fa fa-long-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Panel 6 -->

        <!-- Panel 7 -->
        <div class="onboarding-carousel__panel js-onboarding-panel" id="panel-6">
            <h3 class="onboarding-carousel__panel-title">
                <span class="onboarding-carousel__panel-number">07</span>
                Lorem Ipsum
            </h3>
            <div class="onboarding-carousel__panel-wrap">
                <div class="onboarding-carousel__panel-main">
                    <h4 class="onboarding-carousel__panel-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, reprehenderit quae. Eos sint quo numquam, eum incidunt consectetur similique mollitia!</p>
                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </p>

                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor sit amet
                            <i class="fa fa-external-link"></i>
                        </a>
                    </p>

                    <h4 class="onboarding-carousel__panel-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, reprehenderit quae. Eos sint quo numquam, eum incidunt consectetur similique mollitia!</p>
                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </p>

                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor sit amet
                            <i class="fa fa-external-link"></i>
                        </a>
                    </p>
                </div>

                <div class="onboarding-carousel__panel-sidebar">
                    <div class="onboarding-carousel__panel-card">
                        <img src="/images/photos/8.jpg" alt="" class="img-responsive" />

                        <div class="onboarding-carousel__panel-card-body">
                            <h5 class="onboarding-carousel__panel-card-title">Tenetur dicta provident aliquid quod inventore fugit!</h5>

                            <div class="onboarding-carousel__panel-card-content">
                                <p>Exercitationem soluta esse cum libero minus veritatis! Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
                            </div>

                            <div class="onboarding-carousel__panel-card-actions">
                                <a href="#" class=""
                                    >Lorem ipsum dolor sit
                                    <i class="fa fa-long-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Panel 7 -->

        <!-- Panel 8 -->
        <div class="onboarding-carousel__panel js-onboarding-panel" id="panel-7">
            <h3 class="onboarding-carousel__panel-title">
                <span class="onboarding-carousel__panel-number">08</span>
                Similique Fugiat Alias
            </h3>
            <div class="onboarding-carousel__panel-wrap">
                <div class="onboarding-carousel__panel-main">
                    <h4 class="onboarding-carousel__panel-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, reprehenderit quae. Eos sint quo numquam, eum incidunt consectetur similique mollitia!</p>
                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </p>

                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor sit amet
                            <i class="fa fa-external-link"></i>
                        </a>
                    </p>

                    <h4 class="onboarding-carousel__panel-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, reprehenderit quae. Eos sint quo numquam, eum incidunt consectetur similique mollitia!</p>
                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </p>

                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor sit amet
                            <i class="fa fa-external-link"></i>
                        </a>
                    </p>
                </div>

                <div class="onboarding-carousel__panel-sidebar">
                    <div class="onboarding-carousel__panel-card">
                        <img src="/images/photos/9.jpg" alt="" class="img-responsive" />

                        <div class="onboarding-carousel__panel-card-body">
                            <h5 class="onboarding-carousel__panel-card-title">Tenetur dicta provident aliquid quod inventore fugit!</h5>

                            <div class="onboarding-carousel__panel-card-content">
                                <p>Exercitationem soluta esse cum libero minus veritatis! Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
                            </div>

                            <div class="onboarding-carousel__panel-card-actions">
                                <a href="#" class=""
                                    >Lorem ipsum dolor sit
                                    <i class="fa fa-long-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Panel 8 -->

        <!-- Panel 9 -->
        <div class="onboarding-carousel__panel js-onboarding-panel" id="panel-8">
            <h3 class="onboarding-carousel__panel-title">
                <span class="onboarding-carousel__panel-number">09</span>
                Lorem Ipsum
            </h3>
            <div class="onboarding-carousel__panel-wrap">
                <div class="onboarding-carousel__panel-main">
                    <h4 class="onboarding-carousel__panel-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, reprehenderit quae. Eos sint quo numquam, eum incidunt consectetur similique mollitia!</p>
                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </p>

                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor sit amet
                            <i class="fa fa-external-link"></i>
                        </a>
                    </p>

                    <h4 class="onboarding-carousel__panel-subtitle">Lorem ipsum dolor sit amet consectetur adipisicing</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, reprehenderit quae. Eos sint quo numquam, eum incidunt consectetur similique mollitia!</p>
                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor
                            <i class="fa fa-long-arrow-right"></i>
                        </a>
                    </p>

                    <p>
                        <a href="#" class="btn btn-link">
                            Lorem ipsum dolor sit amet
                            <i class="fa fa-external-link"></i>
                        </a>
                    </p>
                </div>

                <div class="onboarding-carousel__panel-sidebar">
                    <div class="onboarding-carousel__panel-card">
                        <img src="/images/photos/10.jpg" alt="" class="img-responsive" />

                        <div class="onboarding-carousel__panel-card-body">
                            <h5 class="onboarding-carousel__panel-card-title">Tenetur dicta provident aliquid quod inventore fugit!</h5>

                            <div class="onboarding-carousel__panel-card-content">
                                <p>Exercitationem soluta esse cum libero minus veritatis! Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
                            </div>

                            <div class="onboarding-carousel__panel-card-actions">
                                <a href="#" class=""
                                    >Lorem ipsum dolor sit
                                    <i class="fa fa-long-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Panel 9 -->
    </div>
</div>

.onboarding-carousel-wrap {
  background-color: $color-base-blue;
}

.onboarding-carousel-wrap__inner {
  max-width: 1170px;
  margin: 0 auto;
  background: url("/images/onboarding-carousel-bg.png") no-repeat 0 4rem;
}

.onboarding-carousel-component-title {
  border-left: 2.4rem solid rgba($color-blue-dark, 0.5);
}

.onboarding-carousel-component-title__inner {
  @include typeHeadline(true);
  text-transform: uppercase;
  display: inline-block;
  border-left: 2.4rem solid $color-blue-dark;
  padding: 2.4rem 4.2rem 2.4rem 1.6rem;
  color: $color-base-white;
  background-color: $color-blue-medium;

  @media (min-width: $breakpoint-desktop) {
    @include typeDisplay(true);
    width: 36rem;
  }
}

.onboarding-carousel-carousel {
  position: relative;
}

.onboarding-carousel__list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: flex;
}

.onboarding-carousel__number {
  @include typeDisplayLarge(true);
  color: rgba($color-green-medium, 0.4);
  margin-bottom: 1.6rem;
}

.onboarding-carousel__title {
  @include typeHeadline(true);
  overflow-wrap: break-word;
  margin-bottom: 1.6rem;
}

.onboarding-carousel__dates {
  @include typeCaption(true);
  margin-bottom: 1.6rem;
}

.onboarding-carousel__desc {
  @include typeBody;
  margin-bottom: 2.4rem;
}

.onboarding-carousel__link {
  position: relative;
  border: 4rem solid transparent;
  display: inline-block;
  width: 24rem;
  height: 100%;
  padding: 0.4rem;
  color: $color-grey-dark;
  background-color: $color-base-white;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;

  &:hover {
    border-color: $color-green-light;
    text-decoration: none;

    .onboarding-carousel__number {
      color: $color-green-medium;
    }

    .onboarding-carousel__title,
    .onboarding-carousel__dates,
    .onboarding-carousel__desc {
      color: $color-base-blue;
    }
  }

  &:focus {
    outline: 0;
    text-decoration: none;
  }

  &::before,
  &::after {
    position: absolute;
    top: 0;
    content: "";
    width: 4rem;
    height: 16rem;
  }

  &::before {
    left: 0;
    background-color: rgba($color-grey-light, 0.75);
    transform: translateX(-100%);
  }

  &::after {
    right: 0;
    background-color: rgba($color-grey-medium, 0.75);
    transform: translateX(100%);
  }
}

.onboarding-carousel__item {
  position: relative;
  display: flex;
  margin-bottom: 2.4rem;

  &.is-active {
    // Triangle
    &::after {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 100%);
      content: "";
      width: 0;
      height: 0;
      border-left: 1.2rem solid transparent;
      border-right: 1.2rem solid transparent;
      border-top: 2.4rem solid $color-green-medium;
    }

    .onboarding-carousel__link {
      border-color: $color-green-medium;
    }

    .onboarding-carousel__number {
      color: $color-green-medium;
    }

    .onboarding-carousel__title,
    .onboarding-carousel__dates,
    .onboarding-carousel__desc {
      color: $color-base-blue;
    }
  }
}

.onboarding-carousel__panels {
  max-width: 1170px;
  margin: 0 auto;
}

.onboarding-carousel__panel {
  padding: 2.4rem;
  display: none;

  @media (min-width: $breakpoint-desktop) {
    padding: 4rem;
  }

  &.is-active {
    display: block;
  }
}

.onboarding-carousel__panel-title {
  @include typeDisplay(true);
  margin-bottom: 2.4rem;
}

.onboarding-carousel__panel-number {
  color: $color-green-medium;
}

.onboarding-carousel__panel-subtitle {
  @include typeSubheader(true);
}

.onboarding-carousel__panel-wrap {
  display: flex;
  flex-direction: column;

  @media (min-width: $breakpoint-desktop) {
    flex-direction: row;
  }
}

.onboarding-carousel__panel-main {
  flex-basis: 67%;
}

.onboarding-carousel__panel-sidebar {
  flex-basis: 33%;
  padding: 0 2.4rem;
}

.onboarding-carousel__panel-card {
  background-color: $color-base-grey;
  max-width: 28rem;
  margin: 0 auto;

  @media (min-width: $breakpoint-desktop) {
    float: right;
  }
}

.onboarding-carousel__panel-card-body {
  padding: 2.4rem;
}

.onboarding-carousel__panel-card-title {
  @include typeBody(true);
  margin: 0 0 1.2rem;
}

.onboarding-carousel__panel-card-actions {
  font-weight: bold;

  a:hover {
    text-decoration: none;
  }
}

$(document).ready(function () {
  $(".js-onboarding-carousel").each(function () {
    const $carousel = $(this);
    const $cards = $carousel.find(".js-onboarding-cards");
    const $card = $(".js-onboarding-card");
    const $panels = $(".js-onboarding-panel");

    $cards.slick({
      arrows: false,
      centerMode: true,
      centerPadding: "3.2rem",
      infinite: false,
      mobileFirst: true,
      variableWidth: true,
      responsive: [
        {
          breakpoint: 767,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2,
          },
        },
        {
          breakpoint: 1199,
          settings: {
            centerMode: false,
            arrows: true,
            slidesToShow: 5,
            slidesToScroll: 5,
          },
        },
      ],
    });

    $card.on("click", function (e) {
      e.preventDefault();
      const $target = $("#" + e.currentTarget.dataset.target);
      if ($target.length && !$target.hasClass("is-active")) {
        $(".js-onboarding-card").parent().removeClass("is-active");
        $(this).parent().addClass("is-active");

        $panels.removeClass("is-active");
        $target.addClass("is-active");
      }
    });
  });
});