.quote {
  background-color: #edecea; /* Цвет фона для секции цитат */
  text-align: center; /* Выравнивание текста по центру */
  padding: 5rem 5.6%; /* Увеличенный верхний и нижний padding, уменьшенные боковые padding */
  padding-bottom: 7rem;
}

.quote .quote-box {
  margin: 0 auto; /* Центрирование контейнера цитат */
  max-width: 90rem; /* Уменьшение максимальной ширины для улучшения читабельности */
}

.quote blockquote {
  color: black; /* Более темный цвет текста для лучшего контраста */
  margin: 0 auto; /* Авто-маржины для центрирования и добавления пространства сверху и снизу */
  position: relative; /* Для позиционирования псевдоэлементов */
}

.quote .quotation-mark {
  font-family: "Istok Web", sans-serif;
  font-size: 12.8rem; /* Уменьшение размера для более дискретного отображения */
  color: #ff9bab; /* Цвет кавычек */
  position: absolute; /* Абсолютное позиционирование для контроля над расположением */
  top: -9rem; /* Смещение вверх для визуального эффекта */
  left: 50%; /* Центрирование */
  transform: translateX(-50%); /* Точное центрирование */
}

.quote .text-quote {
  margin: 0; /* Убираем маржин для текста цитаты */
  font-weight: 400;
  line-height: 4rem;
  font-size: 3rem;
  position: relative; /* Для позиционирования псевдоэлементов */
  margin-bottom: 3.5rem;
  margin-top: 5.5rem;
}

.quote .text-quote::after {
  content: "";
  position: absolute;
  bottom: -2rem; /* Положение линии под текстом цитаты */
  left: 50%; /* Центрирование линии */
  transform: translateX(-50%);
  width: 50%; /* Ширина линии */
  height: 3px; /* Толщина линии */
  background: #ff9bab; /* Цвет линии */
}

.quote cite {
  font-size: 2.5rem; /* Меньший размер шрифта для имени автора */
  font-style: normal;
}

@media (max-width: 768px) {
  .quote {
    padding: 3rem 5.6%; /* Уменьшение padding на мобильных устройствах */
  }

  .quote .quotation-mark {
    font-size: 6rem; /* Уменьшение размера кавычек на мобильных устройствах */
    top: -4rem; /* Корректировка положения */
  }

  .quote .text-quote {
    font-size: 1.8rem; /* Уменьшение размера шрифта цитаты для лучшей читабельности на мобильных */
    line-height: 2.2rem;
  }

  .quote cite {
    font-size: 1.6rem; /* Уменьшение размера шрифта для имени автора на мобильных */
  }
}

@media (max-width: 480px) {
  .quote {
    padding: 2rem 5.6%; /* Уменьшение padding на мобильных устройствах */
  }

  .quote .quotation-mark {
    font-size: 4rem; /* Уменьшение размера кавычек на мобильных устройствах */
    top: -3rem; /* Корректировка положения */
  }

  .quote .text-quote {
    font-size: 1.2rem; /* Уменьшение размера шрифта цитаты для лучшей читабельности на мобильных */
    line-height: 1.44rem;
    margin-bottom: 2rem;
    margin-top: 2rem;
  }

  .quote cite {
    font-size: 1rem; /* Уменьшение размера шрифта для имени автора на мобильных */
  }

  .quote .text-quote::after {
    bottom: -1rem; /* Положение линии под текстом цитаты */
    height: 1px; /* Толщина линии */
  }
}