


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


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

         .hot_1 {
         }

         .hot_2 {
         }

         .hot_3 {
         }


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

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

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

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

         @media (max-width: 890px) {
         .hot_1 {
            display: none;
         }
         }

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





         /* ===========  MINI  ===========  */

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


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

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


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

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

        .hot_mini_topic_title a:hover {
            text-decoration-color: #181818;
        }




         /* ===========  BIG  ===========  */

         .hot_big_topic {
            display: flex;
            flex-direction: column; /* Размещение элементов по вертикали */
            justify-content: flex-start; /* Выровнять элементы по верхнему краю */
            max-width: 488px;
            min-width: 320px;
                width: 100%; /* Позволяет адаптироваться под родительский контейнер */
            margin-top: 0px;
            margin-bottom: 0px;
         }


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

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


        .hot_big_topic_title {
            font-family: Helvetica, Arial, sans-serif;
            text-align: left;
            font-size: 24.5px;
            font-weight: bold;
            line-height: 33px;
            color: #181818;
            margin-top: 15px;
        }

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

        .hot_big_topic_title a:hover {
            text-decoration-color: #181818;
        }



