<header class="image-banner is-halfscreen">
    <div class="image-banner--header">
        <!-- pour centrer -->
        <div class="conteneur">
            <a class="btn is-circular-xs image-header-btn" href="#" title="Voir la catégorie" data-sal="fade" data-sal-duration="1000" data-sal-delay="250">
                <span class="dsp-none">Series stars</span>
                <i class="fas fa-star"></i>
            </a>

            <h1 class="fat-box-title" data-sal="slide-up" data-sal-duration="1000">Profile page</h1>
            <p class="fat-box-subtitle spacer-x dsp-none" data-sal="slide-up" data-sal-duration="1250">Images, galeries, etc.</p>

            <p>
                <a class="btn is-outline theme-switcher" href="#pictures" title="Voir plus">EXPLORER</a>
            </p>
        </div>
    </div>

    
        <!-- source srcset="img/sounds-like/atthirappilly-waterfall-sound-image_fullscreen.jpg" media="(max-width: 768px)" -->
        <img class="image-banner--img" src="https://filedn.com/l1vRtvhTTT4kHnR1ydDjyfF/ds-fusion/img/header-image-sea.jpg" alt="Starlight" />
    
</header> 

 /* IMAGES HEADERS / BANNER */

/* La "boite" conteneur */
.image-banner {
    position: relative;
    overflow: hidden;
}

/* Le header */
.image-banner--header {
    position: absolute;
    padding: 2rem; 
    width: 100%;
    height: 50%;
    bottom: 0;
    background-image: var(--gradient-to-black); /* dégradé ? */
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
}

/* Sur le Light theme -> gradient-to-white */ 
.light-theme .image-banner--header {
    background-image: var(--gradient-to-white); 
}

/* L'image */
.image-banner--img,
.image-banner--picture > img {
    height: 100%;
    object-fit: cover;
}

/* Halfscreen */
.is-halfscreen {
    max-height: 50vh!important;
}

/* Fullscreen */
.is-fullscreen {
    height: 100vh!important;
}

.image-banner--header.is-fullscreen {
    height: 100%!important;
}

.image-banner--header > * {
    padding-bottom: 2rem;
    color: var(--color-txt-btn); /* blanc */
}

.image-header-btn {
    font-size: 1.5rem;
}