/*
******************************
** Headerimage Styles
******************************
*/

.headerimage {
    height: 600px;
    @media screen and (min-width: 768px) {
        height: 900px;
    }
    @media screen and (min-width: 1921px) {
        height: 1000px;
    }

    .image {
        height: 100%;
        background-size: cover;
        background-position: top;
        position: relative;
        z-index: 0;
    }

    .text {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        z-index: 5;
        color: rgb(var(--color-lightest));
        padding-top: 50px;

        @media screen and (min-width: 1660px) {
            width: 1600px;
            left: 50%;
            margin-left: calc(var(--width-total) / 2 * -1);
        }

        h1 {
            max-width: 900px;
            text-shadow: 1px 1px 4px rgb(var(--color-key));
        }

        p {
            margin-bottom: 0;
        }
    }
}