/*
 * Text Bild Teaser
 */
.textimageteaser {
    position: relative;
    display: flex;

    & .cornertext {
        position: absolute;
        width: 120px;
        height: 120px;
        top: 0;
        left: 0;
        overflow: hidden;

        & span {
            display: block;
            background-color: var(--abc-red);
            color: #fff;
            width: 200px;
            padding: 25px 50px 5px;
            font-size: 1rem;
            text-align: center;
            transform: translateX(-100px) rotate(-45deg);
            transform-origin: 100px 0;
        }
    }

    & .image {
        position: relative;
        background-color: #fff;

        & img.placeholder {
            opacity: 0;
        }

        & img.image {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }

        @media (min-width: 768px) {
            flex: 0 0 40%;
        }
    }

    & .content {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        padding: 30px;

        @media (min-width: 768px) {
            flex: 1 0 60%;
        }
    }
}