/* text-image-corner — extracted from frontend/scss/includes/elements/_text-image-corner.scss */
/* Rendered by Mask TextImageCorner.html (CType mask_text_image_corner) and the text-image-corner ContentBlock */

.text-image-corner {
    position: relative;
    background-color: #fff;
    border: 1px solid #e9ecef;
    padding: 25px;
    box-shadow: 0 0 10px 0 rgba(206, 211, 218, 1);
    min-height: 15rem;

    /* same as frame indent */
    @media (min-width: 992px) {
        margin-left: 80px;
        margin-right: 80px;
    }

    @media (min-width: 1330px) {
        margin-left: 120px;
        margin-right: 120px;
    }

    & .image {
        margin-bottom: 1.875rem;

        @media (min-width: 768px) {
            max-width: 20rem;
            margin-bottom: 0;
        }
    }

    & p:last-child {
        margin-bottom: 0;
    }

    &.background-quote {
        background-image: url(../../Icons/double-chevron.svg);
        background-size: 50px auto;
        background-repeat: no-repeat;
    }

    &.red-corner {
        &::before {
            content: "";
            display: block;
            width: 150px;
            max-width: 30%;
            max-height: 50%;
            height: 150px;
            position: absolute;
            pointer-events: none;

            @media (max-width: 539px) {
                right: -10px;
                bottom: -10px;
                border: 10px solid var(--abc-red);
                border-width: 0 10px 10px 0;
            }
        }
    }

    &.image-position-topleft {

        @media (min-width: 768px) {
            padding-left: 18.75rem;

            & .image {
                position: absolute;
                top: -50px;
                left: -50px;
            }
        }

        @media (min-width: 768px) {
            &.red-corner::before {
                right: -10px;
                bottom: -10px;
                border: 10px solid var(--abc-red);
                border-width: 0 10px 10px 0;
            }
        }

        &.background-quote {
            background-position: right 20px bottom 20px;
        }
    }

    &.image-position-topright {

        @media (min-width: 768px) {
            padding-right: 18.75rem;

            & .image {
                position: absolute;
                right: -50px;
                top: -50px;
            }
        }

        /* Ecke unten links */
        @media (min-width: 768px) {
            &.red-corner::before {
                left: -10px;
                bottom: -10px;
                border: 10px solid var(--abc-red);
                border-width: 0 0 10px 10px;
            }
        }

        &.background-quote {
            background-position: right 300px bottom 20px;
        }
    }

    &.image-position-bottomleft {

        @media (min-width: 768px) {
            padding-left: 18.75rem;

            & .image {
                position: absolute;
                bottom: -50px;
                left: -50px;
            }
        }

        /* Ecke oben rechts */
        @media (min-width: 768px) {
            &.red-corner::before {
                right: -10px;
                top: -10px;
                border: 10px solid var(--abc-red);
                border-width: 10px 10px 0 0;
            }
        }

        &.background-quote {
            background-position: left 20px bottom 20px;
        }
    }

    &.image-position-bottomright {
        @media (min-width: 768px) {
            padding-right: 18.75rem;

            & .image {
                position: absolute;
                right: -50px;
                bottom: -50px;
            }
        }

        /* Ecke oben links */
        @media (min-width: 768px) {
            &.red-corner::before {
                left: -10px;
                top: -10px;
                border: 10px solid var(--abc-red);
                border-width: 10px 0 0 10px;
            }
        }

        &.background-quote {
            background-position: right 300px bottom 20px;
        }
    }
}