header
{
    height: clamp(260px, 18vw, 320px);

    overflow: hidden;

    background:
        linear-gradient(
            rgba(0,0,0,.35),
            rgba(0,0,0,.35)
        ),
        url("/home/img/beach1.png")
        center center / cover no-repeat;

    background-size: cover;
    background-position: center;
}


.header-content
{
    display: grid;

    grid-template-columns: 300px 1fr auto;

    align-items: center;

    height: 100%;

    margin: auto;

    padding: 0 80px 25px 0;
}

/*==========================================================
    Header sans guitare
==========================================================*/

.header-content.no-guitar
{
    grid-template-columns: 1fr auto;
}
/*==========================================================
    Titre
==========================================================*/

.header-content.no-guitar .header-title
{
    display: flex;

    align-items: center;

   justify-self: center;    

}
.header-content.no-guitar .header-icon
{
    width: 85px;

    padding-right: 10px;

    filter:
        drop-shadow(0 5px 12px rgba(0,0,0,.35));
}


.header-title h1
{
    margin: 0;

    font-size: 4.2rem;

    color: white;

    font-family: Georgia, serif;

    text-shadow:
        0 3px 8px rgba(0,0,0,.6);
}

.header-title p
{
    font-size: 1.3rem;

    color: rgba(255,255,255,.92);

    text-shadow:
        0 2px 5px rgba(0,0,0,.7);
}