.text-breaker-block {
    display: flex;
    gap: 10.6%;
    position: relative;

    .text-breaker-decorator {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;

        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 39.4%;
            transform: translateY(-50%);
            width: 2px;
            height: 300vh;
            background-color: #312D34;
        }

        @media screen and (max-width: 600px) {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;

            &::after {
                content: '';
                position: absolute;
                top: 50%;
                left: -4px;
                transform: translateY(-50%);
                width: 2px;
                height: 300vh;
                background-color: #312D34;
            }
        }
    }

    @media screen and (max-width: 600px) {
        flex-direction: column;
        gap: 24px;
        position: relative;
    }

    .text-breaker-title {
        flex: 0 0 39.4%;
        text-wrap-style: balance;
        font-weight: 700;

        @media screen and (max-width: 600px) {
            flex: none;
        }
    }

    .text-breaker-body {
        flex: 1;
        position: relative;

        @media screen and (max-width: 600px) {
            font-size: 2rem;

            &::before {
                content: '';
                position: absolute;
                top: -14px;
                left: 50%;
                transform: translateX(-50%);
                width: 300vw;
                height: 2px;
                background-color: #312D34;
            }
        }

        &.small {
            font-size: 1.125rem;
            line-height: 1.5;
        }

        &.medium {
            font-size: 1.6rem;
            line-height: 1.5;
        }

        &.large {
            font-size: 2.4rem;
            line-height: 1.333;
        }
    }

    .text-breaker-body {
        padding: 0 24px;
    }

    .text-breaker-title {
        padding-right: 24px;

        @media screen and (max-width: 600px) {
            padding-left: 24px;
            padding-bottom: 24px;
        }
    }
}

.has-background .text-breaker-block {
    .text-breaker-body {
        color: var(--wp--preset--color--text);
    }
}