section.banner {
    min-height: 363px;
    background-image: url('/images/banner-tooltips.jpg');
    background-size: cover;
    align-content: end;
    color: #fff;
    background-position: 30%;
}

section.banner:not(.overlay) {
    margin-top: 0.5em;
}

section.banner :not(#overlay-content) h1 { 
    font-size: clamp(2rem, 5vw, calc(3.25em * var(--dpr)));
    line-height: 1.2; 
}

section.banner :not(#overlay-content) p {
    font-size: clamp(1rem, 2vw, calc(1rem * var(--dpr)));
    margin-bottom: 2em; 
}

@media screen and (max-width: 363px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) and (orientation:portrait) { 
    section.banner {
        background-image: url('/images/banner-tooltips-vertical.jpg'); 
    }
}

@media screen and (min-width: 1280px) 
{
    section.banner:not(.overlay) > div { padding: 0 7em; }    
}

@media screen and (max-width: 1279px) 
{   
    section.banner:not(.overlay) > div { padding: 0 7vw; }    
    section.overlay #overlay-content { display: none; }
    section.banner span { margin: 0.25em; }

}

@media screen and (max-width: 767px) {

    section.banner:not(.overlay) > div {
        font-size: clamp(0.8rem, 1.5vw, 0.9rem);
    }

    section.banner h1 {
        max-width: 11em;
    }

    section.banner p br {
        display: none;
    }

}

@media screen and (max-width: 440px) {

    section.banner:not(.overlay) > div {
        font-size: clamp(0.8rem, 1vw, 0.8rem);
    }

    section.banner h1 {
        max-width: 15em;
    }

    section.banner h1 br,
    section.banner p br {
        display: none;
    }

}