.text-image-group {
    position: relative;

    .image {
        margin-bottom: 1.25rem;

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

        img {
            width: 100%;
            height: auto;
        }
    }

    .text {
        background-color: #fff;
        border: 1px solid #e9ecef;
        padding: 25px;
        box-shadow: 0 0 10px 0 rgba(206, 212, 218, 1);

        @media (min-width: 768px) {
            width: 65%;
            position: absolute;
            padding: 40px;

            &::before {
                content: "";
                display: block;
                width: 150px;
                max-width: 30%;
                max-height: 50%;
                height: 150px;
                border: 10px solid var(--abc-red);
                position: absolute;
                pointer-events: none;
            }
        }

        @media (min-width: 1330px) {
            width: 50%;
        }
    }

    @media (min-width: 768px) {
        &.text-position-topright {
            padding-top: 6.25rem;

            .image {
                margin-right: auto;
            }

            .text {
                top: 0;
                right: 0;

                &::before {
                    right: -10px;
                    top: -10px;
                    border-width: 10px 10px 0 0;
                }
            }
        }

        &.text-position-topleft {
            padding-top: 6.25rem;

            .image {
                margin-left: auto;
            }

            .text {
                top: 0;
                left: 0;

                &::before {
                    top: -10px;
                    left: -10px;
                    border-width: 10px 0 0 10px;
                }
            }
        }

        &.text-position-bottomleft {
            padding-bottom: 6.25rem;

            .image {
                margin-left: auto;
            }

            .text {
                bottom: 0;
                left: 0;

                &::before {
                    left: -10px;
                    bottom: -10px;
                    border-width: 0 0 10px 10px;
                }
            }
        }

        &.text-position-bottomright {
            padding-bottom: 6.25rem;

            .image {
                margin-right: auto;
            }

            .text {
                bottom: 0;
                right: 0;

                &::before {
                    right: -10px;
                    bottom: -10px;
                    border-width: 0 10px 10px 0;
                }
            }
        }
    }
}