/* === Комментарий: Общий заголовок секции — указывает, что стили базируются на оформлении lesson-8 === */
    /* Базовое оформление на основе lesson-8.css */

/* === Стили для всего body (основной контейнер страницы) === */
body {
    /* Убираем стандартные отступы браузера */
    margin: 0; padding: 0;
    /* Очень светлый голубой фон — создаёт ощущение неба, детская тема */
    background-color: #99dfff;
    /* Основной шрифт — Comic Sans MS (детский, дружелюбный), запасной — Arial */
    font-family: 'Comic Sans MS', 'Arial', sans-serif;
}

/* === Контейнер основного контента — задаёт внутренние отступы страницы === */
.content-wrapper { 
    /* Отступы: 40px сверху/снизу и 20px слева/справа */
    padding: 20px 10px; 
}

/* === Заголовочная часть страницы (имя ребёнка + дата + бейдж занятия) === */
.main-header { 
    /* Центрируем весь блок заголовка */
    text-align: center; 
    /* Отступ снизу перед первой карточкой */
    margin-bottom: 30px; 
}

.lesson-badge {
    /* Делаем элемент блочно-строчным, чтобы можно было задавать padding и ширину */
    display: inline-block;
    /* Светло-жёлтый фон для бейджа */
    background: #fff9c4;
    /* Внутренние отступы — сверху/снизу меньше, слева/справа больше */
    padding: 10px 30px;
    /* Скруглённые углы — детский, мягкий стиль */
    border-radius: 10px;
    /* Яркий оранжевый цвет текста */
    color: #ff6d00;
    /* Жирный шрифт для акцента */
    font-weight: bold;
    /* Очень крупный шрифт для заголовка занятия */
    font-size: 2.3em;
    /* Белая обводка для контраста и объёма */
    border: 3px solid #fff;
}

.user-info { 
    /* Средний размер шрифта для строки с именем и датой */
    font-size: 1.5em; 
    /* Спокойный серо-синий цвет */
    color: #546e7a; 
    /* Небольшой отступ сверху от бейджа */
    margin-top: 10px; 
    /* Жирный начертание */
    font-weight: bold; 
}

/* === Основная карточка задания (белая с жёлтой рамкой) === */
.white-card {
    /* Очень светлый голубовато-белый фон */
    background: #f0faff;
    /* Толстая яркая жёлтая рамка — основной визуальный акцент */
    border: 8px solid #ffd600;
    /* Очень сильное скругление углов — мультяшный стиль */
    border-radius: 25px;
    /* Внутренние отступы внутри карточки */
    padding: 15px;
    /* Центрирование карточки + отступ снизу до следующей */
    margin: 0 auto 30px auto;
    /* Ограничение максимальной ширины для больших мониторов */
    max-width: 800px;
    /* Лёгкая тень для эффекта приподнятости */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    /* Важно: учитываем border и padding в общей ширине/высоте элемента */
    box-sizing: border-box;
}

/* === Заголовок внутри карточки (название задания) === */
.card-title { 
    /* Яркий оранжевый цвет */
    color: #ff7043; 
    /* Центрирование */
    text-align: center; 
    /* Очень крупный шрифт */
    font-size: 2.5em; 
    /* Убираем внешние отступы */
    margin: 0; 
}

/* === Жёлтая разделительная линия под заголовком === */
.yellow-divider { 
    /* Высота полоски */
    height: 3px; 
    /* Яркий жёлтый цвет */
    background: #ffd600; 
    /* Ширина 80% от родителя */
    width: 95%; 
    /* Центрирование + отступы сверху и снизу */
    margin: 7px auto 7px; 
}

/* === Текст инструкции к заданию === */
.card-instruction { 
    /* Крупный читаемый размер */
    font-size: 1.3em; 
    /* Тёмно-серый цвет текста */
    color: #37474f; 
    /* Выравнивание по левому краю (в отличие от lesson-8) */
    text-align: left; 
    /* Отступ снизу до контента задания */
    margin-bottom: 15px; 
    /* Улучшенная читаемость за счёт межстрочного интервала */
    line-height: 1.1; 
}

/* === Блоки контента (шифр, пирамидки, большие картинки) === */
.cipher-layout { 
    /* Flex-контейнер для горизонтального размещения блоков */
    display: flex; 
    /* Расстояние между блоками */
    gap: 20px; 
    /* Центрирование по горизонтали */
    justify-content: center; 
    /* Отступ снизу */
    margin-bottom: 30px; 
}

.cipher-box { 
    /* Каждый блок занимает равное доступное пространство */
    flex: 1; 
}

.pyramid-full-width { 
    /* Полная ширина родителя */
    width: 90%; 
    /* Центрирование содержимого */
    display: flex; 
    justify-content: center; 
    /* Отступ снизу */
    margin-bottom: 30px; 
    margin: 0 auto;
}

.lesson-img-full { 
    /* Растягиваем на всю ширину контейнера */
    width: 900%; 
    /* Ограничение максимальной ширины */
    max-width: 900px; 
    /* Автоматическая высота → сохраняем пропорции */
    height: auto; 
    /* Скруглённые углы для красоты */
    border-radius: 10px; 
    /* Блочное отображение без лишних отступов */
    display: block; 
    margin: 0 auto;
}

/* === Блок с кнопкой "Проверить" === */
.btn-box { 
    /* Flex для центрирования кнопки */
    display: flex; 
    justify-content: center; 
}

.orange-check-btn {
    /* Основной оранжевый цвет кнопки */
    background: #ff6d00;
    /* Белый текст */
    color: #fff;
    /* Без рамки */
    border: none;
    /* Большие внутренние отступы */
    padding: 10px 50px;
    /* Очень крупный текст */
    font-size: 1.5em;
    /* Жирное начертание */
    font-weight: bold;
    /* Скруглённые углы почти до круга */
    border-radius: 50px;
    /* Курсор-рука */
    cursor: pointer;
    /* Имитация 3D-тени */
    box-shadow: 0 6px 0 #d84315;
    /* Верхний регистр для акцента */
    text-transform: uppercase;
}

/* === Эффект нажатия на кнопку === */
.orange-check-btn:active { 
    /* Сдвигаем кнопку вниз при нажатии */
    transform: translateY(4px); 
    /* Уменьшаем тень при нажатии */
    box-shadow: 0 2px 0 #d84315; 
}

/* === Текст результата проверки (правильно/неправильно) === */
.result-text {
    /* Центрирование текста */
    text-align: center;
    /* Очень крупный размер для эмоционального отклика */
    font-size: 1.5em;
    /* Жирный шрифт */
    font-weight: bold;
    /* Отступ сверху от контента */
    margin-top: 10px;
    /* Минимальная высота, чтобы не прыгала высота блока */
    min-height: 1.3em;
}

/* === Глобальные стили для всех текстовых полей ввода на сайте === */
input[type="text"] {
    /* Всегда верхний регистр (важно для логопедических заданий) */
    text-transform: uppercase !important;
    /* Очень крупный шрифт */
    font-size: 1.5em !important;
    /* Жирный начертание */
    font-weight: bold !important;
    /* Детский шрифт */
    font-family: 'Comic Sans MS', sans-serif;
}

/* Заданиe №3 */

/* Контейнер для центрированной полноразмерной картинки задания */
.lesson-image-container {
    width: 80%;                        /* Занимает всю доступную ширину родительского контейнера */
    display: flex;                      /* Включаем flexbox для удобного центрирования содержимого */
    justify-content: center;            /* Горизонтальное центрирование дочерних элементов */
    margin-bottom: 30px;                /* Отступ снизу до следующего блока контента */
    margin: 0 auto;
}

.lesson-img-full {
    width: 1000%;                        /* Картинка пытается занять всю ширину контейнера */
    max-width: 900px;                   /* Ограничение максимальной ширины — защита от чрезмерного растяжения на больших экранах */
    height: auto;                       /* Сохраняем пропорции оригинального изображения */
    border-radius: 20px;                /* Скругление углов изображения для более мягкого, детского вида */
    display: block;                     /* Убираем нижний отступ, который появляется у inline-картинок */
    margin: 0 auto;
}

/* ЗАДАНИЕ 4*/
/* Сетка 2×2 для картинок + поля ввода под ними */

/* Основной вертикальный контейнер всего задания */
.story-container {
    display: flex;                      /* Flex-контейнер для вертикальной компоновки */
    flex-direction: column;             /* Расположение элементов сверху вниз */
    align-items: center;                /* Горизонтальное центрирование всех дочерних блоков */
    gap: 15px;                          /* Расстояние между основными блоками (сетка и поля ввода) */
    width: 100%;                        /* Полная ширина доступного пространства */
}

.story-grid-matrix {
    display: grid;                      /* Используем CSS Grid для точной табличной раскладки */
    grid-template-columns: repeat(2, 1fr);  /* Две колонки равной ширины */
    gap: 10px;                          /* Расстояние между ячейками сетки */
    width: 100%;                        /* Растягиваем на всю ширину контейнера */
    max-width: 400px;                   /* Ограничиваем максимальную ширину для сохранения компактности */
}

.story-img-item {
    border: 3px solid #90caf9;          /* Светло-голубая декоративная рамка вокруг каждой картинки */
    border-radius: 20px;                /* Скругление углов карточки */
    overflow: hidden;                   /* Обрезаем всё, что выходит за границы карточки */
    background: #fff;                   /* Белый фон на случай прозрачных изображений */
    aspect-ratio: 1 / 1;                /* Принудительно делаем каждую карточку квадратной */
}

.story-img-item img {
    width: 100%;                        /* Картинка занимает всю ширину карточки */
    height: 100%;                       /* Картинка занимает всю высоту карточки */
    object-fit: cover;                  /* Заполняет контейнер, обрезая лишнее (картинка не искажается) */
    display: block;                     /* Убираем потенциальный нижний отступ */
}

/* Вертикальная колонка с четырьмя полями ввода */
.story-inputs-column {
    display: flex;                      
    flex-direction: column;             /* Поля ввода располагаются друг под другом */
    gap: 5px;                          /* Расстояние между соседними полями ввода */
    width: 100%;                        
    max-width: 780px;                   /* Ограничение ширины блока с полями ввода */
    box-sizing: border-box;             /* Учитываем padding/border в общей ширине */
}

.story-input-4 {
    width: 100%;                        /* Поле занимает всю ширину своего контейнера */
    height: 50px;                       /* Фиксированная комфортная высота поля */
    border: 2px solid #dfe6e9;          /* Светло-серая рамка */
    border-radius: 10px;                /* Скруглённые углы поля ввода */
    padding: 0 15px;                    /* Внутренние отступы слева и справа */
    background: #fff;                   /* Белый фон поля */
    outline: none;                      /* Убираем стандартную синюю обводку при фокусе */
    box-sizing: border-box;             /* КРИТИЧЕСКИ важно: padding и border не увеличивают ширину */
    font-family: 'Comic Sans MS', sans-serif;  /* Детский шрифт для соответствия общей стилистике */
}

/*Задание № 5*/
/* Контейнер для задания с рисованием поверх изображения */
.drawing-wrapper {
    position: relative;                 /* Необходим для абсолютного позиционирования canvas */
    width: 80%;                        
    max-width: 900px;                   /* Ограничение максимальной ширины для больших экранов */
    margin: 0 auto 20px auto;           /* Центрирование + отступ снизу */
}

#canvas-5 {
    position: absolute;                 /* Абсолютное позиционирование поверх картинки */
    top: 0;                             /* Привязываем к верхнему краю родителя */
    left: 0;                            /* Привязываем к левому краю родителя */
    cursor: crosshair;                  /* Курсор в виде прицела — интуитивно понятно, что можно рисовать */
    z-index: 10;                        /* Холст должен быть поверх базовой картинки */
}

/* Повторное определение класса (перекрывает предыдущее) */
.lesson-img-full {
    width: 100%;                        
    height: auto;                       
    border-radius: 20px;                
    display: block;                     
}

/* Контейнер для горизонтального ряда кнопок */
.btn-box-row {
    display: flex;                      
    justify-content: center;            /* Центрирование кнопок по горизонтали */
    gap: 20px;                          /* Расстояние между кнопками */
}

/* Стили для кнопки "Сброс"/"Очистить" (отличные от основной кнопки проверки) */
.reset-style {
    background: #b0bec5 !important;     /* Серо-голубой цвет — визуально отличается от оранжевой "Проверить" */
    box-shadow: 0 6px 0 #78909c !important;  /* Тень под кнопкой в соответствующем тоне */
}

/* Задание 6: Верстка по макету */
.rhyme-box-layout {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 20px 40px;
}

.rhyme-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Сдвигаем инпут вправо, как в макете */
    width: 100%;
}

.rhyme-text {
    width: 100%;
    text-align: left;
    font-size: 1.8em;
    font-weight: bold;
    color: #0d47a1; /* Темно-синий цвет текста из макета */
    margin-bottom: 5px;
}

.rhyme-text p { margin: 5px 0; }

.rhyme-input-final {
    width: 450px;
    height: 35px;
    border: 2px solid #90caf9;
    background: #fff;
    outline: none;
    padding: 5px 15px;
    font-size: 1.2em;
}

/* Зеленая кнопка из макета */
.green-check-btn-final {
    background: linear-gradient(to bottom, #aed581, #689f38);
    color: white;
    border: 2px solid #558b2f;
    border-radius: 40px;
    padding: 10px 60px;
    font-size: 2em;
    cursor: pointer;
    box-shadow: 0 4px 0 #33691e;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.green-check-btn-final:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #33691e;
}


/* Задание №7. Раскраска — основной контейнер всего задания */
.coloring-container {
    display: flex;                    /* Включаем flexbox для вертикальной компоновки */
    flex-direction: column;           /* Элементы располагаются сверху вниз */
    align-items: center;              /* Горизонтальное центрирование всех дочерних блоков */
    gap: 30px;                        /* Расстояние между основными блоками (сетка и палитра) */
    padding: 20px;                    /* Внутренние отступы по всему периметру контейнера */
}

.coloring-grid {
    display: grid;                    /* Используем CSS Grid для точной табличной раскладки */
    grid-template-columns: repeat(3, 240px);  /* Три колонки фиксированной ширины 250px */
    grid-template-rows: repeat(2, 240px);     /* Две строки фиксированной высоты 250px */
    gap: 5px;                        /* Расстояние между всеми ячейками сетки */
    justify-content: center;          /* Центрируем всю сетку внутри контейнера */
}

.color-item-box {
    background-color: #ffffff;        /* Белый фон карточки для раскрашивания */
    border: 2px solid #e0e0e0;        /* Тонкая светло-серая рамка по умолчанию */
    border-radius: 25px;              /* Значительное скругление углов — мягкий, детский стиль */
    display: flex;                    /* Flex для центрирования изображения внутри карточки */
    justify-content: center;          /* Горизонтальное центрирование содержимого */
    align-items: center;              /* Вертикальное центрирование содержимого */
    padding: 15px;                    /* Внутренние отступы внутри карточки */
    cursor: pointer;                  /* Курсор-рука — информирует, что элемент кликабелен */
    overflow: hidden;                 /* Обрезаем всё, что выходит за границы карточки */
    transition: transform 0.2s ease;  /* Плавная анимация при изменении масштаба */
}

.color-item-box img {
    max-width: 100%;                  /* Изображение не шире контейнера */
    max-height: 100%;                 /* Изображение не выше контейнера */
    object-fit: contain;              /* Сохраняем пропорции, полностью вписываем картинку */
    border-radius: 15px;              /* Скругление углов самого изображения */
}

.palette-row {
    display: flex;                    /* Горизонтальная строка с цветными образцами */
    gap: 12px;                        /* Расстояние между цветными квадратиками */
    justify-content: center;          /* Центрирование всей палитры */
    padding: 10px;                    /* Небольшие внутренние отступы палитры */
}

.color-sample {
    width: 60px;                      /* Фиксированная ширина образца цвета */
    height: 60px;                     /* Фиксированная высота образца цвета */
    border: 2px solid #455A64;        /* Тёмно-серая рамка вокруг образца */
    border-radius: 10px;              /* Небольшое скругление углов образца */
    cursor: pointer;                  /* Курсор-рука — элемент кликабелен */
    box-sizing: border-box;           /* Border включается в заданные 60×60 px */
}

.color-sample.active-color {
    outline: 4px solid #FF6D00;       /* Яркая оранжевая обводка для активного/выбранного цвета */
    transform: scale(1.1);            /* Небольшое увеличение активного образца */
}

.green-check-btn-final {
    background: linear-gradient(to bottom, #AED581, #689F38);  /* Зелёный градиент сверху вниз */
    color: white;                     /* Белый цвет текста */
    border: 2px solid #558B2F;        /* Тёмно-зелёная рамка кнопки */
    border-radius: 40px;              /* Сильно скруглённые углы — почти овальная форма */
    padding: 12px 60px;               /* Вертикальные отступы меньше горизонтальных */
    font-size: 1.8rem;                /* Крупный размер текста на кнопке */
    cursor: pointer;                  /* Курсор-рука */
    box-shadow: 0 4px 0 #33691E;      /* Тень под кнопкой для эффекта приподнятости */
}

/* Задание 8: Комикс. Комментарий: задание 8 */
.comic-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 25px;
    padding: 10px;
}

.comic-item {
    position: relative;
    border: 3px solid #90caf9;
    border-radius: 10px;
    cursor: grab;
    background: #fff;
    line-height: 0;
    transition: transform 0.2s, box-shadow 0.2s;
}

.comic-item:active { cursor: grabbing; }
.comic-item.dragging { opacity: 0.5; transform: scale(0.95); }

.comic-item img {
    width: 100%;
    height: auto;
    border-radius: 7px;
    pointer-events: none; /* Чтобы не мешать drag-событиям */
}

.number-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    background: #fff;
    border: 2px solid #546e7a;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.1rem;
    color: #37474f;
    z-index: 2;
}

.story-textarea {
    width: 100%;
    height: 150px;
    border: 2px solid #90caf9;
    border-radius: 15px;
    padding: 15px;
    font-size: 1.2rem;
    font-family: inherit;
    resize: none;
    outline: none;
    box-sizing: border-box;
}

.story-textarea:focus { border-color: #ff6d00; }


/* Задание №9 */

/* Контейнер всей раскладки задания 9: центрирует лестницу и подсказки горизонтально */
.ladder-layout {
    display: flex;                    /* Используем flex для горизонтального размещения */
    justify-content: center;          /* Центрируем содержимое по горизонтали */
    align-items: center;              /* Выравниваем по вертикали по центру */
    gap: 10px;                        /* Расстояние между лестницей и блоком подсказок */
    margin: 10px 0;                   /* Отступы сверху и снизу от всего блока */
}

/* Контейнер самой лестницы (вертикальная колонка рядов) */
.ladder-grid-container {
    display: flex;                    /* Flex для вертикального стека рядов */
    flex-direction: column;           /* Направление — сверху вниз */
    gap: 5px;                         /* Небольшой отступ между рядами лестницы */
}

/* Один горизонтальный ряд букв на лестнице */
.ladder-row {
    display: flex;                    /* Flex для горизонтального размещения ячеек букв */
}

/* Одна ячейка с буквой на лестнице */
.char-cell {
    width: 40px;                      /* Фиксированная ширина ячейки */
    height: 40px;                     /* Фиксированная высота ячейки (квадрат) */
    border: 2px solid #1a237e;        /* Тёмно-синяя рамка вокруг каждой ячейки */
    text-align: center;               /* Центрирование буквы внутри ячейки */
    font-size: 1.5rem;                /* Достаточно крупный шрифт для детей */
    font-weight: bold;                /* Жирное начертание букв */
    text-transform: uppercase;        /* Всегда верхний регистр */
    box-sizing: border-box;           /* Размер включает border (важно при наложении) */
    margin-right: -2px;               /* Компенсация двойной границы между соседними ячейками */
    outline: none;                    /* Убираем стандартную обводку при фокусе */
}

/* Статичные (неизменяемые) ячейки — обычно уже заполненные буквы */
.char-cell.static {
    background-color: #fff;           /* Белый фон */
    color: #1a237e;                   /* Тёмно-синий цвет текста */
    font-style: italic;               /* Курсив для отличия от вводимых ячеек */
    cursor: default;                  /* Курсор обычный — нельзя кликать/выделять */
}

/* Контейнер сетки с подсказками (картинками) */
.ladder-hints-grid {
    display: grid;                    /* Используем grid для ровной сетки */
    grid-template-columns: repeat(3, 140px);   /* 3 колонки по 150px */
    grid-template-rows: repeat(2, 140px);      /* 2 строки по 150px */
    gap: 5px;                        /* Отступ между карточками-подсказками 15px */
}

/* Одна карточка-подсказка (с картинкой) */
.hint-card {
    background: #fff;                 /* Белый фон карточки */
    border: 1px solid #e0e0e0;        /* Тонкая светло-серая рамка */
    border-radius: 10px;              /* Скруглённые углы */
    display: flex;                    /* Flex для центрирования изображения */
    justify-content: center;          /* Центр по горизонтали */
    align-items: center;              /* Центр по вертикали */
    padding: 10px;                    /* Внутренние отступы внутри карточки */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Очень лёгкая тень для объёма */
}

/* Изображение внутри карточки-подсказки */
.hint-card img {
    max-width: 100%;                  /* Не больше ширины карточки */
    max-height: 100%;                 /* Не больше высоты карточки */
    object-fit: contain;              /* Сохраняем пропорции, вписываем полностью */
}

/* Комментарий: Начало стилей для Задания 10 — зигзагообразное расположение текста и картинок (речевые карточки) */
/* Задание 10: Зигзагообразное расположение. Комментарий: задание 10 */

/* Основной контейнер всего задания 10 */
.speech-container {
    display: flex;                    /* Flex-контейнер для вертикального стека строк */
    flex-direction: column;           /* Направление сверху вниз */
    gap: 30px;                        /* Расстояние между строками (речевыми блоками) */
    margin: 20px 0;                   /* Отступы сверху и снизу от всего блока */
    max-width: 900px;                 /* Ограничение максимальной ширины для читаемости */
}

/* Одна строка (речевой блок: текст + картинка) */
.speech-row {
    display: flex;                    /* Flex для горизонтального размещения текста и изображения */
    align-items: center;              /* Выравнивание по вертикали по центру */
    justify-content: space-between;   /* Максимальное распределение пространства между элементами */
    gap: 30px;                        /* Расстояние между текстом и картинкой */
}

/* Модификатор .reverse — разворачивает порядок: картинка слева, текст справа */
.speech-row.reverse {
    flex-direction: row-reverse;      /* Обратный порядок элементов (картинка → текст) */
}

/* Блок с речевым текстом (предложение для проговаривания) */
.speech-text {
    flex: 1;                          /* Занимает всё доступное пространство */
    font-size: 1.8rem;               /* Удобный читаемый размер шрифта */
    line-height: 1.5;                 /* Увеличенный межстрочный интервал для лучшей читаемости */
    color: #333;                      /* Тёмно-серый цвет текста */
    padding: 15px;                    /* Внутренние отступы внутри блока текста */
    background: #f9fbe7;              /* Очень светлый жёлто-зелёный фон (мягкий, детский) */
    border-radius: 10px;              /* Скруглённые углы */
    border-left: 5px solid #afb42b;   /* Толстая левая цветная полоска-акцент (оливково-зелёная) */
}

/* Выделение звука [С] внутри текста — красным цветом и жирным начертанием */
.speech-text strong {
    color: #c62828;                   /* Ярко-красный цвет для звука С */
    font-weight: bold;                /* Жирное начертание для дополнительного акцента */
}

/* Блок с картинкой в речевой строке */
.speech-image {
    width: 250px;                     /* Фиксированная ширина картинки */
    height: 200px;                    /* Фиксированная высота */
    flex-shrink: 0;                   /* Не даём картинке сжиматься */
    border: 2px solid #e0e0e0;        /* Тонкая светло-серая рамка */
    border-radius: 12px;              /* Скруглённые углы */
    overflow: hidden;                 /* Скрываем всё, что выходит за границы */
    background: #fff;                 /* Белый фон на случай прозрачных изображений */
    display: flex;                    /* Flex для центрирования изображения */
    justify-content: center;          /* Центр по горизонтали */
    align-items: center;              /* Центр по вертикали */
}

/* Изображение внутри блока .speech-image */
.speech-image img {
    max-width: 100%;                  /* Не больше ширины контейнера */
    max-height: 100%;                 /* Не больше высоты контейнера */
    object-fit: contain;              /* Сохраняем пропорции, полностью вписываем картинку */
}