@font-face {
            font-family: 'Novecento Narrow Demi Bold';
            src: url('../font/Novecento_NarrowDemiBold.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
         }



         .hot {
            display: block;
            width: 100%;
            background-color: #ffffff;
            margin-top: 35px;
         }


         .hot_inner {
            display: flex;
            justify-content: space-between; /* Размещение элементов по краям */
position: relative;
            max-width: 1024px;
            height: auto;
            margin: 0 auto; /* Центрируем по горизонтали */
            box-sizing: border-box; /* Включаем отступы в расчет размера */
         }


         .hot_left {
            display: flex;
            flex-direction: column; /* Размещение элементов по вертикали */
            justify-content: flex-start; /* Выровнять элементы по верхнему краю */
            max-width: 673px;
         }

.hot_right {
    position: absolute; /* Абсолютное позиционирование */
    top: 50%; /* Центрируем по вертикали */
    right: 0; /* Прижимаем к правому краю */
    transform: translateY(-50%); /* Смещаем вверх на 50% своей высоты */
    z-index: 2; /* Поднимаем выше .hot_img_big */
    background-color: #ffffff; /* Добавляем фон, если нужно */
    padding-left: 0px; /* Добавляем отступы, чтобы текст не прилипал к краям */
    width: 500px;
            height: 350px;
            border-radius: 5px;
}


         @media (max-width: 1024px) {
            .hot_inner {
            margin-left: 40px;
            margin-right: 40px;
         }
         }




         /* ===========  LEFT  ===========  */

         .hot_img_big {
            width: 681px;
            height: 434px;
            overflow: hidden; /* Скрывает части изображения, выходящие за рамки */
            position: relative; /* Для правильного позиционирования изображения */
         }

         .hot_img_big img {
            width: 100%; /* Растягиваем изображение по ширине контейнера */
            height: 100%; /* Растягиваем изображение по высоте контейнера */
            object-fit: cover; /* Сохраняет соотношение сторон, обрезая лишнее */
            position: absolute; /* Убирает влияние размеров изображения на контейнер */
            top: 50%; /* Центрируем по вертикали */
            left: 50%; /* Центрируем по горизонтали */
            transform: translate(-50%, -50%); /* Сдвигаем для точного центрирования */
            border-radius: 5px;
         }




         /* ===========  RIGHT  ===========  */

         .hot_text {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Выравнивание всех элементов по правому краю */
    text-align: right; /* Выравнивание текста */
            margin-top: 38px;
            margin-left: 40px;
         }


         .hot_text_tag {
            font-family: Novecento Narrow Demi Bold, sans-serif;
            text-align: left;
            font-size: 16px;
            font-weight: bold;
            text-transform: uppercase;
            color: #e83b3d;
            margin-bottom: 10px;
         }


        .hot_text_title {
            font-family: Helvetica, Arial, sans-serif;
            text-align: left;
            font-size: 38px;
            font-weight: bold;
            line-height: 48px;
                display: block; /* Позволяет тексту вести себя как блочный элемент */
                max-height: calc(48px * 2); /* Ограничиваем высоту 2 строками */
                overflow: hidden; /* Обрезаем лишний текст */
                   word-break: break-word; /* Разрешает разрывать длинные слова */
                   overflow-wrap: anywhere; /* Позволяет разрывать слова в любом месте */
                   hyphens: auto; /* Добавляет дефис при переносе */
            color: #202020;
            margin-bottom: 7px;
        }

.hot_text_title a {
    color: #202020;
    text-decoration-line: underline;       /* всегда подчеркивание */
    text-decoration-color: transparent;    /* но изначально невидимое */
    text-decoration-thickness: 2px;        /* толщина линии */
    text-underline-offset: 3px;            /* небольшой отступ от текста */
    transition: text-decoration-color 0.3s ease; /* плавное появление/исчезновение */
}

.hot_text_title a:hover {
    text-decoration-color: #202020;
}


         .hot_text_short {
            font-family: Helvetica, Arial, sans-serif;
            text-align: left;
            font-size: 18px;
            font-weight: normal;
            line-height: 28px;
                display: block; /* Позволяет тексту вести себя как блочный элемент */
                max-height: calc(28px * 3); /* Ограничиваем высоту 3 строками */
                overflow: hidden; /* Обрезаем лишний текст */
            color: #5e5e5e;
            margin-bottom: 15px;
         }

         .hot_text_author {
            font-family: Helvetica, Arial, sans-serif;
            text-align: right;
            font-size: 13.5px;
            font-weight: normal;
            text-transform: uppercase;
            color: #444444;
            margin-bottom: 14px;
         }

         .hot_text_author a {
            font-family: Helvetica, Arial, sans-serif;
            text-align: right;
            font-size: 13.5px;
            font-weight: bold;
            color: #202020;
            text-decoration: underline;
            margin-bottom: 0px;

         }

         .hot_text_author a:hover {
            color: #202020;
            text-decoration: none;
         }

         .hot_text_date {
            font-family: Helvetica, Arial, sans-serif;
            text-align: right;
            font-size: 13.5px;
            font-weight: normal;
            color: #a9a9a9;
            margin-bottom: 0px;
         }



         /* ===========  MEDIA  ===========  */

         @media (max-width: 760px) {
         .hot_inner {
            display: flex;
            flex-direction: column;
            justify-content: flex-start; /* Выровнять элементы по верхнему краю */
         }

         .hot_img_big {
                width: 100%; /* Адаптивная ширина */
                height: auto; /* Автоматическая высота */
                aspect-ratio: 681 / 434; /* Сохраняет соотношение сторон */
            overflow: hidden; /* Скрывает части изображения, выходящие за рамки */
            position: relative; /* Для правильного позиционирования изображения */
         }

         .hot_right {
            position: relative;
                top: 0%; /* Центрируем по вертикали */
                transform: translateY(0%); /* Смещаем вверх на 0% своей высоты */
            width: 100%;
            max-width: 600px;
            margin-left: 0px;
            margin-bottom: -60px;
         }
         .hot_text {
            margin-left: 0px;
            margin-right: 0px;
         }
        .hot_text_title {
            max-height: none;    /* Убираем ограничение по высоте */
            overflow: visible;   /* Делаем так, чтобы содержимое было видно */
        }
         .hot_text_short {
            max-height: none;    /* Убираем ограничение по высоте */
            overflow: visible;   /* Делаем так, чтобы содержимое было видно */
         }
         .hot_text_date {
            margin-bottom: 30px;
         }
         }