.content-campaign-teaser {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: -15px;
    margin-right: -15px;
}
.content-campaign-teaser__img-box {
    position: relative;
    /* cannot use flex as it would cause issues in FF due to problems with flex-items with padding */
    /* display: flex; */
    /* width required for IE 11 - otherwise image will disappear */
    width: 100%;
    overflow: hidden;
}
.content-campaign-teaser__img-link {
    display: block;
    width: 100%;
    outline: none;
}
.content-campaign-teaser__img {
    display: block;
    /* width required for too small images */
    width: 100%;
    margin: auto;
}
.content-campaign-teaser__body-wrap {
    position: relative;
    padding: 0 15px 15px;
}
.content-campaign-teaser__body {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    margin-top: -20px;
    padding: 18px;
    border: 2px solid #f2f2f2;
    background-color: #fff;
}
.content-campaign-teaser__body-headline {
    color: #302e2c;
    font-weight: bold;
    line-height: 1.4;
    margin: 0 0 .3em;
}
.content-campaign-teaser__body-text {
    margin: 0;
}
.content-campaign-teaser__btn-wrap {
    margin-top: 1.2em;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */
@media ( min-width: 768px ) {
    .content-campaign-teaser {
        flex-direction: row-reverse;
        margin-left: auto;
        margin-right: auto;
    }
    .content-campaign-teaser--text-right {
        flex-direction: row;
    }
    .content-campaign-teaser--text-bottom {
        flex-direction: column;
    }
    .content-campaign-teaser--text-top {
        flex-direction: column-reverse;
    }
    .content-campaign-teaser__body-wrap {
        display: flex;
        flex: 0 0 25%;
        padding: 0;
    }
    .content-campaign-teaser--text-right .content-campaign-teaser__body-wrap {
        justify-content: flex-end;
    }
    .content-campaign-teaser--text-bottom .content-campaign-teaser__body-wrap {
        flex-basis: auto;
        padding: 0 15px 15px;
    }
    .content-campaign-teaser--text-top .content-campaign-teaser__body-wrap {
        flex-basis: auto;
        padding: 15px 15px 0;
    }
    .content-campaign-teaser__body {
        margin-top: 0;
        margin-right: -80px;
        flex-basis: 300px;
    }
    .content-campaign-teaser--text-right .content-campaign-teaser__body {
        margin-right: 0;
        margin-left: -80px;
    }
    .content-campaign-teaser--text-bottom .content-campaign-teaser__body,
    .content-campaign-teaser--text-top .content-campaign-teaser__body {
        max-width: none;
        flex-shrink: 1;
        margin-right: 0;
    }
    .content-campaign-teaser--text-bottom .content-campaign-teaser__body {
        margin-top: -15px;
    }
    .content-campaign-teaser--text-top .content-campaign-teaser__body {
        margin-bottom: -15px;
    }
}

@media ( min-width: 992px ) {
    .content-campaign-teaser__body {
        flex-basis: 400px;
        padding: 28px;
    }
}

@media ( min-width: 1200px ) {
    .content-campaign-teaser__body {
        margin-right: -120px;
    }
    .content-campaign-teaser--text-right .content-campaign-teaser__body {
        margin-right: 0;
        margin-left: -120px;
    }
    .content-campaign-teaser--text-bottom .content-campaign-teaser__body,
    .content-campaign-teaser--text-top .content-campaign-teaser__body {
        margin-right: 0;
    }
    .content-campaign-teaser--text-bottom .content-campaign-teaser__body {
        max-width: 400px;
        margin-top: -100px;
    }
    .content-campaign-teaser--text-top .content-campaign-teaser__body {
        max-width: 400px;
        margin-bottom: -100px;
    }
}