.page-header .headline {
    position: relative;
    display: inline-block;
    font-size: calc(3vw + 3vh);
    font-weight: bold;
    
    text-transform: uppercase;
    z-index: 10;
    max-width: 100%;

    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.headline-brand {
    color: var(--color-secondary);
}

.headline-dark {
    color: black;
}

@media (min-width: 24em) {
    .page-header .headline {
        position: relative;
        font-size: calc(2vw + 2vh);
        letter-spacing: 3px;
        margin-top: 1rem;
    }

    .page-header .home-header-slogan {
        top: 21rem;
    }

    .page-header .inner-wrapper {
        height: auto;
    }
}

@media (min-width: 64.0625em) {
    .page-header .headline {
        font-size: calc(1.5vw + 1.5vh);
    }
}

.page-header .headline.orange {
    color: white;
    font-size: calc(20vw + 3vh);
}

@media (min-width: 24em) {

    .page-header .headline.orange {
        font-size: calc(5vw + 3vh);
    }
}