History

<div class="history">
    <h2>History</h2>

    <div class="horizontal-timeline">
        <div class="horizontal-timeline__bg"></div>
        <h2>History</h2>
        <div class="timeline-slider">
            <div class="timeline-slider__carousel">
                <div class="slide">
                    <div class="timeline-pod ">

                        <div class="timeline-pod__title">
                            <div class="title">Title 1 example</div>
                        </div>
                        <div class="progress-bar"></div>
                        <div class="active-dot"><span></span></div>
                        <div class="timeline-pod__content">
                            <p>Donec consectetur pellentesque turpis eget maximus. Proin luctus ex nibh, sit amet efficitur sapien tincidunt in.</p>
                            <br>
                            <a href="#modal-timeline-1" data-modal-open class="timeline-pod__read-more cta cta--link">
                              <span class="cta__label">Read more
                                  <svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <path d="M14.54 7.63l-1.5 1.13.67 2.21H5.18v2h8.53l-.67 2.2 1.5 1.13 5.32-3.5v-1.67l-5.32-3.5z"/>
                                  </svg>
                              </span>
                            </a>

                            <div id="modal-timeline-1" class="modal-hider timeline-pod__popup">
                                Read more
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slide">
                    <div class="timeline-pod ">

                        <div class="timeline-pod__title">
                            <div class="title">Title 2 example</div>
                        </div>
                        <div class="progress-bar"></div>
                        <div class="active-dot"><span></span></div>
                        <div class="timeline-pod__content">
                            <p>Donec consectetur pellentesque turpis eget maximus. Proin luctus ex nibh, sit amet efficitur sapien tincidunt in.</p>
                            <br>
                            <a href="#modal-timeline-2" data-modal-open class="timeline-pod__read-more cta cta--link">
                              <span class="cta__label">Read more
                                  <svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <path d="M14.54 7.63l-1.5 1.13.67 2.21H5.18v2h8.53l-.67 2.2 1.5 1.13 5.32-3.5v-1.67l-5.32-3.5z"/>
                                  </svg>
                              </span>
                            </a>

                            <div id="modal-timeline-2" class="modal-hider timeline-pod__popup">
                                Read more
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slide">
                    <div class="timeline-pod ">

                        <div class="timeline-pod__title">
                            <div class="title">Title 3 example</div>
                        </div>
                        <div class="progress-bar"></div>
                        <div class="active-dot"><span></span></div>
                        <div class="timeline-pod__content">
                            <p>Donec consectetur pellentesque turpis eget maximus. Proin luctus ex nibh, sit amet efficitur sapien tincidunt in.</p>
                            <br>
                            <a href="#modal-timeline-3" data-modal-open class="timeline-pod__read-more cta cta--link">
                              <span class="cta__label">Read more
                                  <svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <path d="M14.54 7.63l-1.5 1.13.67 2.21H5.18v2h8.53l-.67 2.2 1.5 1.13 5.32-3.5v-1.67l-5.32-3.5z"/>
                                  </svg>
                              </span>
                            </a>

                            <div id="modal-timeline-3" class="modal-hider timeline-pod__popup">
                                Read more
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slide">
                    <div class="timeline-pod ">

                        <div class="timeline-pod__title">
                            <div class="title">Title 4 example</div>
                        </div>
                        <div class="progress-bar"></div>
                        <div class="active-dot"><span></span></div>
                        <div class="timeline-pod__content">
                            <p>Donec consectetur pellentesque turpis eget maximus. Proin luctus ex nibh, sit amet efficitur sapien tincidunt in.</p>
                            <br>
                            <a href="#modal-timeline-4" data-modal-open class="timeline-pod__read-more cta cta--link">
                              <span class="cta__label">Read more
                                  <svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                    <path d="M14.54 7.63l-1.5 1.13.67 2.21H5.18v2h8.53l-.67 2.2 1.5 1.13 5.32-3.5v-1.67l-5.32-3.5z"/>
                                  </svg>
                              </span>
                            </a>

                            <div id="modal-timeline-4" class="modal-hider timeline-pod__popup">
                                Read more
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>