Raconter le temps

 <article class="padded">
    <!-- Titre -->
    <h2 class="spacer-bottom-2x txt-gray-light" data-sal="slide-up" data-sal-duration="750">Let's <span class="txt-color-1">take the road</span>, folks.</h2>

    <!-- Liste -->
    <ul class="timeline--container">
        <!-- Episode 1 -->
        <li class="timeline--event">
            <!-- Badge -->
            <b class="timeline--badge circle-s color-1 txt-color-5" data-sal="slide-up" data-sal-duration="750" data-sal-delay="250">1</b>

            <!-- -->
            <header class="timeline--box" data-sal="slide-up" data-sal-duration="750" data-sal-delay="350">
                <h3 class="timeline--title">
                    <span class="h5 txt-gray-light">Episode 1</span><br />
                    Visiter Moustiers Sainte Marie
                </h3>
            </header>
            
            <ul class="timeline--box grid-layout grid-half-m grid-third-l has-gutter inner-y-space">
    
                <!-- Elément 1 -->
                <li data-sal="slide-up" data-sal-duration="750" data-sal-delay="450">
                    <!-- La "Card" est dans un article -->
                    <article class="product-card is-horizontal">

                        <!-- En tête -->
                        <header class="product-card--header">
                            <div class="product-card--category">
                                <ul class="post-categories">
                                    <li><a href="#" rel="category tag">Styles</a></li>
                                </ul>
                            </div>

                            <!-- Titre -->
                            <h4 class="product-card--title">Une étoile dans le Verdon</h4>

                            <!-- Exergue -->
                            <p class="product-card--excerpt">Lorem Elsass ipsum ullamcorper vielmols, quam. hop Heineken mänele...</p>

                            <!-- Lien -->
                            <a class="is-moving to-right" href="#" title="Voir">READ ME <i class="spacer-left-xs fa fa-arrow-right"></i></a>
                        </header>

                    </article>
                </li>

            </ul>
            
        </li>

        <!-- Episode 2 -->
        <li class="timeline--event">
            <!-- Badge -->
            <b class="timeline--badge circle-s color-1 txt-color-5" data-sal="slide-up" data-sal-duration="750" data-sal-delay="250">2</b>

            <!-- -->
            <header class="timeline--box" data-sal="slide-up" data-sal-duration="750" data-sal-delay="350">
                <h3 class="timeline--title">
                    <span class="h5 txt-gray-light">Episode 2</span><br />
                    Flâner au Belvédère du Galetas
                </h3>
            </header>

            <!-- Texte et date -->
            <div class="timeline--box two-third-xl" data-sal="slide-up" data-sal-duration="750" data-sal-delay="450">
                <!-- texte -->
                <p>
                    kougelhopf quam, nullam messti de Bischheim lotto-owe mamsell wie elit senectus kartoffelsalad knepfle sit libero, amet
                    Oberschaeffolsheim sed Morbi Verdammi hopla Oberschaeffolsheim non Gal ! leo Coopé de Truchtersheim Pfourtz !
                </p>

                <!-- Date -->
                <p class="entry-date">21 Juin 2021</p>
            </div>
        </li>

        <!-- Episode 3 : pause Café -->
        <li class="timeline--event">
 
            <!-- Badge -->
            <b class="timeline--badge circle-s color-1 txt-color-5" data-sal="slide-up" data-sal-duration="750" data-sal-delay="250">3</b>
            <!-- -->
            <header class="timeline--box" data-sal="slide-up" data-sal-duration="750" data-sal-delay="250">
                <h3 class="timeline--title">
                    <span class="h5 txt-gray-light">Episode 3</span><br />
                    S'arrêter boire un café 
                </h3>
            </header>

          <div class="timeline--box inner-top-space" data-sal="slide-up" data-sal-duration="750" data-sal-delay="350">
            <article class="product-card is-horizontal h-card-third half-xxl">

                <!-- Vignette -->
                
                    <img src="https://filedn.com/l1vRtvhTTT4kHnR1ydDjyfF/ds-fusion/img/square-images/tonsai-beach-cafe1.jpg" alt="Image de l'élément" />
                

                <!-- En tête -->
                <header class="product-card--header">
                    <div class="product-card--category">
                        <ul class="post-categories">
                            <li><a href="#" rel="category tag">Sounds</a></li>
                            <li><a href="#" rel="category tag">Thailand</a></li>
                        </ul>
                    </div>

                    <!-- Titre -->
                    <h4 class="product-card--title">Coffee in Tonsai Beach</h4>

                    <!-- Exergue -->
                    <p class="product-card--excerpt show-on-large">Lorem Elsass ipsum ullamcorper vielmols, quam. hop Heineken mänele...</p>

                    <!-- Lien -->
                    <a class="product-card--main-link is-moving to-right" href="#" title="Voir">READ ME <i class="spacer-left-xs fa fa-arrow-right"></i></a>
                </header>

            </article>
          </div>
        </li>
        
        <!-- Episode 4 -->
        <li class="timeline--event">
            <!-- Badge -->
            <b class="timeline--badge circle-s color-1 txt-color-5" data-sal="slide-up" data-sal-duration="750" data-sal-delay="250">4</b>

            <!-- -->
            <header class="timeline--box" data-sal="slide-up" data-sal-duration="750" data-sal-delay="350">
                <h3 class="timeline--title">
                    <span class="h5 txt-gray-light">Episode 4</span><br />
                    Rouler sur la Corniche Sublime
                </h3>
            </header>

            <!-- Texte et date -->
            <div class="timeline--box two-third-xl" data-sal="slide-up" data-sal-duration="750" data-sal-delay="450">
                <!-- texte -->
                <p>J'entends les pneus crisser sur le vieil asphalte de la route des gorges au fur et à mesure que j'accélère, et me laisse envahir peu à peu par cette douce sensation de danger...</p>

                <!-- Date -->
                <p class="entry-date">15 Juillet 2021</p>
            </div>
        </li>
      
        <!-- Episode 5 -->
        <li class="timeline--event">
            <!-- Badge -->
            <b class="timeline--badge circle-s color-1 txt-color-5" data-sal="slide-up" data-sal-duration="750">5</b>
          
            <header class="timeline--box">
                <h3 class="timeline--title">
                    <span class="h5 txt-gray-light">Episode 5</span><br />
                    Take pictures on the Road
                </h3>
            </header>

          <div class="grid-layout has-gutter grid-1-3-5">
            
            <!-- Photo 1 -->
            <article class="picture-card" data-sal="slide-left" data-sal-duration="500">

                <!-- Vignette -->
                
                    <img src="https://filedn.com/l1vRtvhTTT4kHnR1ydDjyfF/ds-fusion/img/asphalt/soundwave-galerie-image-1.jpg" alt="Image de l'élément" />
                

                <!-- En tête -->
                <header class="picture-card--content">
                    <div class="picture-card--category">
                        <ul class="post-categories">
                            <li><a href="#" rel="category tag">Travelling</a></li>
                            <li><a href="#" rel="category tag">America</a></li>
                        </ul>
                    </div>

                    <!-- Titre -->
                    <h4 class="picture-card--title">#AtTheDinner</h4>

                    <!-- Exergue -->
                    <p class="dsp-none">Lorem Elsass ipsum ullamcorper vielmols, quam. hop Heineken mänele...</p>

                    <!-- Lien -->
                    <a class="picture-card--main-link is-moving rotating" href="#" title="Voir"><span class="dsp-none"></span><i class="spacer-left-xs fa fa-plus"></i></a>
                </header>

            </article>
            
            <!-- Photo 2 -->
            <article class="picture-card" data-sal="slide-left" data-sal-duration="500" data-sal-delay="250">

                <!-- Vignette -->
                
                    <img src="https://filedn.com/l1vRtvhTTT4kHnR1ydDjyfF/ds-fusion/img/asphalt/soundwave-galerie-image-2.jpg" alt="Image de l'élément" />
                

                <!-- En tête -->
                <header class="picture-card--content">
                    <div class="picture-card--category">
                        <ul class="post-categories">
                            <li><a href="#" rel="category tag">Travelling</a></li>
                            <li><a href="#" rel="category tag">Costa Rica</a></li>
                        </ul>
                    </div>

                    <!-- Titre -->
                    <h4 class="picture-card--title">#OnTheBeach</h4>

                    <!-- Exergue -->
                    <p class="dsp-none">Lorem Elsass ipsum ullamcorper vielmols, quam. hop Heineken mänele...</p>

                    <!-- Lien -->
                    <a class="picture-card--main-link is-moving rotating" href="#" title="Voir"><span class="dsp-none"></span><i class="spacer-left-xs fa fa-plus"></i></a>
                </header>

            </article>
            
            <!-- Photo 3 -->
            <article class="picture-card" data-sal="slide-left" data-sal-duration="500" data-sal-delay="350">

                <!-- Vignette -->
                
                    <img src="https://filedn.com/l1vRtvhTTT4kHnR1ydDjyfF/ds-fusion/img/asphalt/soundwave-galerie-image-3.jpg" alt="Image de l'élément" />
                

                <!-- En tête -->
                <header class="picture-card--content">
                    <div class="picture-card--category">
                        <ul class="post-categories">
                            <li><a href="#" rel="category tag">Travelling</a></li>
                            <li><a href="#" rel="category tag">America</a></li>
                        </ul>
                    </div>

                    <!-- Titre -->
                    <h4 class="picture-card--title">#HikingInTheMountains</h4>

                    <!-- Exergue -->
                    <p class="dsp-none">Lorem Elsass ipsum ullamcorper vielmols, quam. hop Heineken mänele...</p>

                    <!-- Lien -->
                    <a class="picture-card--main-link is-moving rotating" href="#" title="Voir"><span class="dsp-none"></span><i class="spacer-left-xs fa fa-plus"></i></a>
                </header>

            </article>
            
            <!-- Photo 4 -->
            <article class="picture-card" data-sal="slide-left" data-sal-duration="500" data-sal-delay="450">

                <!-- Vignette -->
                
                    <img src="https://filedn.com/l1vRtvhTTT4kHnR1ydDjyfF/ds-fusion/img/asphalt/soundwave-galerie-image-4.jpg" alt="Image de l'élément" />
                

                <!-- En tête -->
                <header class="picture-card--content">
                    <div class="picture-card--category">
                        <ul class="post-categories">
                            <li><a href="#" rel="category tag">Travelling</a></li>
                            <li><a href="#" rel="category tag">India</a></li>
                        </ul>
                    </div>

                    <!-- Titre -->
                    <h4 class="picture-card--title">#InTheTukTuk</h4>

                    <!-- Exergue -->
                    <p class="dsp-none">Lorem Elsass ipsum ullamcorper vielmols, quam. hop Heineken mänele...</p>

                    <!-- Lien -->
                    <a class="picture-card--main-link is-moving rotating" href="#" title="Voir"><span class="dsp-none"></span><i class="spacer-left-xs fa fa-plus"></i></a>
                </header>

            </article>
            
            <!-- Photo 5 -->
            <article class="picture-card" data-sal="slide-left" data-sal-duration="500" data-sal-delay="550">

                <!-- Vignette -->
                
                    <img src="https://filedn.com/l1vRtvhTTT4kHnR1ydDjyfF/ds-fusion/img/asphalt/soundwave-galerie-image-5.jpg" alt="Image de l'élément" />
                

                <!-- En tête -->
                <header class="picture-card--content">
                    <div class="picture-card--category">
                        <ul class="post-categories">
                            <li><a href="#" rel="category tag">Style</a></li>
                        </ul>
                    </div>

                    <!-- Titre -->
                    <h4 class="picture-card--title">#MakingBubbles</h4>

                    <!-- Exergue -->
                    <p class="dsp-none">Lorem Elsass ipsum ullamcorper vielmols, quam. hop Heineken mänele...</p>

                    <!-- Lien -->
                    <a class="picture-card--main-link is-moving rotating" href="#" title="Voir"><span class="dsp-none"></span><i class="spacer-left-xs fa fa-plus"></i></a>
                </header>

            </article>
            
          </div>
        </li>
    </ul>
</article>
 

 /* TIMELINE */


/* li */

.timeline--event {
    position: relative;
    padding-bottom: 2rem; 
}

.timeline--event:not(:last-of-type) {
    border-left: 5px dashed var(--gray-light); 
}


/* Les cercles */
.timeline--badge {
    position: absolute;
    left: -27.5px;
    color: var(--color-5); /* blanc */
    font-weight: 700;
    transition: .25s;
}

.timeline--badge:hover {
    transform: scale(1.05);
    transition: .25s;
}

.timeline--event:last-of-type .timeline--badge {
    left: -22.5px;
}

.timeline--title {
	margin-top: 0;
	position: relative;
	top: -.5rem;
	margin-bottom: 1rem;
}

/* "Boite" pour les sous-éléments de timeline--event */
.timeline--box {
    /* Variable pour la largeur de la marge G (cf responsive) */
	--timeline-l-space: 2rem;
	padding-left: var(--timeline-l-space);
}

/*  MEDIA QUERIES */


/* LARGE devices (desktops, 992px and up) */
@media (min-width: $mq-large) {
 
    .timeline--event {
        padding-bottom: 3rem; 
    }

}


/* EXTRA LARGE devices (large desktops, 1200px and up) */
@media (min-width: $mq-xlarge) {
        
     .timeline--event {
        padding-bottom: 4rem; 
    }   
    
    
}


/* EXTRA XLARGE devices (large desktops, 1400px and up) */
@media (min-width: $mq-xxlarge) {
      
    .timeline--box {
        --timeline-l-space: 3rem;
    }

    
}