.pageIntro {
    position: relative;
    font-weight: 500;
    color: #000;
}

.pageIntro__picture {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    overflow: hidden;
}

.pageIntro__picture img {
    position: absolute;
    left: -999em;
}

.pageIntro__title {
    margin: .1em 0 .15em;
    font-weight: 700;
    font-size: 2.7em;
    line-height: 1.05;
    color: inherit;
}

.pageIntro__subTitle {
    font-weight: 700;
    font-size: 1.75em;
    color: inherit;
    line-height: 1;
}

.pageIntro__intro {
    font-size: .9em;
    margin: 1.8em 0 .2em 0;
}

.pageIntro__link {
    display: block;
    font-size: .9em;
}

.pageIntro__link:before {
    font-size: 1.7em;
}

@media screen and (max-width: 767px) {
    .pageIntro__contentWrapper {
        padding: 0;
    }

    .pageIntro__title span {
        display: table-cell;
        vertical-align: bottom;
        height: 2em;
    }

    .pageIntro__title {
        display: block;
        padding: 0 1rem 6em 1rem;
        font-size: 9.5vw;
        background-size: cover;
        background-position: 50% 50%;
    }

    .pageIntro__title {
        margin-top: 3em;
        max-height: 35vh;
    }

    .pageIntro__title span {
        position: relative;
        top: -2.7em;
        display: table-cell;
        vertical-align: bottom;
        height: 3em;
    }

    .pageIntro__intro,
    .pageIntro__subTitle {
        display: block;
        padding: 0 1rem;
    }

    .pageIntro__subTitle {
        padding: 1em 1rem 0;
        font-size: calc(1em + 1.5vw);
    }

    .pageIntro__link--overImage {
        margin: -5em 1em 0;
        color: #fff;
        position: absolute;
    }

    .pageIntro__link--afterText {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    .pageIntro__title {
        background: none !important;
    }

    .pageIntro__link--overImage {
        display: none;
    }

    .pageIntro__picture {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        right: 0;
        left: 40%;
    }

    .pageIntro--wide .pageIntro__picture {
        left: 0;
    }

    .pageIntro--wide .pageIntro__picture:after {
        content: "";
        speak: none;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        color: #fff;
        background: rgba(0,0,0,.1);
    }

    .pageIntro__contentWrapper {
        position: relative;
        max-width: 1150px;
        padding: calc(2em + 4vw) 1rem;
    }

    .pageIntro__content {
        min-width: 30em;
        width: 30%;
        text-shadow: 0 0 5px rgba(255,255,255,.3), 0 0 30px rgba(255,255,255,.4);
    }

    .pageIntro--wide .pageIntro__content {
        padding-left: 2em;
        border-left: 5px solid #c3cd23;
        text-shadow: 0 0 5px rgba(0,0,0,.3), 0 0 30px rgba(0,0,0,.4);
    }

    .pageIntro--wide {
        color: #fff;
    }

    .pageIntro--wide .pageIntro__link {
        color: #fff;
    }
}