.hab-text-img.hti{.hti__title {

    }

    .thi__text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        overflow: hidden;
        /*-webkit-line-clamp: 14;*/
        transition: max-height 0.3s ease;

        font-size: 16px;
        line-height: 1.5;
        @media (max-width: 767px) {
            font-size: 14px;
        }

        &.th {

            @media (max-width: 991px) {
                -webkit-line-clamp: 12;
            }

            @media (max-width: 767px) {
                -webkit-line-clamp: 10;
            }
        }

        & ul {
            list-style: disc;
            padding-left: 22px;
        }

        & p {
            font-size: 16px;
            line-height: 1.5;
            @media (max-width: 767px) {
                font-size: 14px;
            }
        }
    }

    .read-more__btn {
        display: none;
        margin-top: 16px;

        &.is-visible {
            display: inline-block;
        }

        .read-more--js {
            display: block;
        }
        .show-less--js {
            display: none;
        }

        &.is-expanded {
            .read-more--js {
                display: none;
            }
            .show-less--js {
                display: block;
            }
        }
    }

    .hti__wrapper {
        display: grid;
        grid-template-columns: 1.112fr 1fr;
        gap: 32px;

        @media (max-width: 767px) {
            grid-template-columns: 1fr;
        }

        &.reverse {
            grid-template-columns: 1fr 1.112fr;
            @media (max-width: 767px) {
                grid-template-columns: 1fr;
            }

            .hti__decor-wrapper {
                padding: 34px 0 0 34px;
                order: -1;
            }

            .hti__img-wrapper:before {
                top: -34px;
                right: 34px;
            }
        }
    }

    .hti__decor-wrapper {
        position: relative;
        padding: 34px 34px 0 0;
        @media (max-width: 767px) {
            order: -1;
            padding: 17px 0 0 17px;
        }

        &.reverse {
            padding: 34px 0 0 34px;

            .hti__img-wrapper:before {
                right: 34px;
            }
        }
    }
    .hti__img-wrapper {
        position: relative;
        bottom: 0;
        left: 0;
        max-height: clamp(398px,31.389vw,452px);
        width: 100%;
        height: 100%;
        padding-top: 270px;

        @media (max-width: 767px) {
            padding-top: 44.72%;
        }

        & img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }

        &:before {
            content: '';
            display: block;
            position: absolute;
            top: -34px;
            right: -34px;
            background-color: var(--background-color-dark,#2B2C2E);
            width: 100%;
            height: 100%;
            border-radius: 8px;

            @media (max-width: 767px) {
                top: -17px;
                right: 17px;
            }
        }
    }

    &.v2 {
        .hti__wrapper {
            grid-template-columns: clamp(92px,10.3vw,148px) auto;
            padding: clamp(16px,3.3334vw,48px);
            background-color: white;
            border-radius: 4px;
            gap: clamp(20px,3.6112vw,52px);

            @media (max-width: 991px) {
                gap: clamp(16px,2.02vw,20px);
                grid-template-columns: 1fr;
            }

            .hti__decor-wrapper {
                padding: 0;
            }
        }

        .hti__img-wrapper {
            padding-top: clamp(92px,10.3vw,148px);
            height: unset;
            width: clamp(92px,10.3vw,148px);

            @media (max-width: 767px) {
                padding-top: 126px;
                width: 126px;
            }

            &:before{
                display: none;
            }
        }

        @media (max-width: 991px) {
            .hti__title {
                margin-bottom: clamp(16px,2.02vw,20px);
            }
            .read-more__btn {
                margin-top: 24px;
            }
        }
    }
}