/* spans over the whole width */
.banner {
    --banner-content-height: calc( var(--banner-total-height) - 4.5rem);
    --heading-h1-size: 2.5rem;
    --heading-h2-size: 1.5rem;
    --logo-to-heading-gap: 1.5rem;

    position: relative;
    width: 100%;
    height: var(--banner-total-height);
    overflow: hidden;
}

.banner .banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner .shadow {
    /* content: ""; */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb( 0,0,0, 0.5);
}

.banner .overlay {
    position: absolute;
    top: calc( (var(--banner-total-height) - var(--banner-content-height) ) /2  );
    left: 0;
    height: var(--banner-content-height);
    width: 100%;
}

.banner .wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.banner .content {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: flex-start;

    padding-left: var(--padding);
    padding-right: var(--padding);
    margin-left: auto;
    margin-right: auto;
    max-width: var(--site-max-width);
}    

.banner .logo {
    content: "";
    height: var(--banner-content-height);
}

.banner .logo img  {
    height: 100%;
    background-color: var(--color-lightgrey-alpha40);
    box-shadow: 0 0 10rem var(--color-lightgrey);
}

.banner .headings {
    color: white;
    font-weight: bold;
    margin-left: var(--logo-to-heading-gap);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: flex-start;
}

.banner .headings h1 {
    font-size: var(--heading-h1-size);
}

.banner .headings h2 {
    font-size: var(--heading-h2-size);
}


@media screen and (max-width: 800px) {
    .banner {
        --banner-content-height: calc( var(--banner-total-height) - 2.5rem);
        --heading-h1-size: 1.42rem;
        --heading-h2-size: 0.857rem;
        --logo-to-heading-gap: 0.857rem;
    }
}