.teaser {
    background-repeat: no-repeat;
    background-size: cover;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

.teaser:only-child {
    height: 100%;
}

.teaser + .teaser {
    margin-top: var(--space-l);
}

.teaser__image {
    position: absolute;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.teaser__text {
    display: block;
    width: 100%;
    position: inherit;
    padding: var(--space-xl);
}

@media screen and (min-width: 30rem) {
    .teaser__text {
        padding: var(--space-2xl);
    }
}

.teaser--hasLink .teaser__text {
    padding-bottom: calc(var(--space-2xl) + 2 * var(--space-s) + var(--font-size));
}

@media screen and (min-width: 30rem) {
    .teaser--hasLink .teaser__text {
        padding-left: calc(var(--space-2xl) + 2 * var(--space-s) + var(--font-size));
        padding-bottom: var(--space-2xl);
    }
}

@media screen and (min-width: 48rem) {
    .teaser--hasLink .teaser__text { 
        padding-left: calc(var(--space-2xl) + 2 * var(--space-s) + var(--font-size));
    }
}

@media screen and (min-width: 60rem) {
    .teaser--hasLink .teaser__text { 
        padding-left: calc(var(--space-2xl) + 2 * var(--space-s) + var(--font-size));
    }
}

.teaser__text > *:first-child {
    margin-top: 0;
}

.teaser__text > *:last-child {
    margin-bottom: 0;
}

@media screen and (min-width: 60rem) {
    .teaser__text--center {
        text-align: center;
    }

    .teaser__text--right {
        text-align: right;
    }
}

.teaser__text--dark {
    color: var(--color-text--inv);
}

.teaser__text--light {
    color: var(--color-text);
}

.teaser__text *:not(h2) {
    font-size: var(--font-size-h4);
}