/* Главная, «О нас» (30.09.2026). Концепт прежнего сайта: рисованная иконка сразу за словом «О нас»,
   «We help students!» крупно в центре, пункты вокруг. В шаблоне ряды были разной ширины и прыгали,
   здесь — ровная сетка 3 × 3. Фраза стоит в центральной ячейке, пункты обтекают её сами
   (grid-auto-flow), так что раскладка держится при любом числе пунктов из панели управления.
   На планшете и телефоне фраза — подзаголовок над пунктами. */

/* иконка у заголовка: в шаблоне прижата к правому краю заголовка шириной 470px и ложилась на текст.
   Отсчёт — от .about-us__title на всю ширину; на планшете — у правого края, на компьютере — ниже */
.about-us__title-in { min-width: 0; position: static; }
.about-us__animation { right: 0; left: auto; top: 0; }

.about-us__slogan { font-size: clamp(22px, 1.2vw + 14px, 30px); font-weight: 700; line-height: 1.2; color: #272727; }
.about-us__body { display: grid; gap: 24px 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.about-us__body > .about-us__slogan { grid-column: 1 / -1; margin: 0 0 4px; }
.about-us__body > .about-us__item { margin: 0; align-items: flex-start; }
.about-us__body .about-us__item-icon { flex: 0 0 40px; max-width: 40px; margin-right: 14px; }
.about-us__body .about-us__item-text { font-size: 16px; line-height: 1.4; }

@media (min-width: 1023px) {
  /* иконка — за бледным словом-подложкой «О нас» (в шаблоне стояла у края заголовка шириной 470px) */
  .about-us__animation { left: clamp(250px, 8vw + 170px, 300px); right: auto; top: 6px; }

  .about-us__body {
    grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense;
    gap: 44px clamp(28px, 3vw, 56px); align-items: center; margin-top: 12px;
  }
  .about-us__body > .about-us__slogan {
    grid-column: 2; grid-row: 2; margin: 0; padding: 12px 0; text-align: center;
    font-size: clamp(40px, 2.6vw + 8px, 64px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em;
  }
  /* под фразой — полоска цветов флага, как на странице входа и в попапах */
  .about-us__slogan::after {
    content: ""; display: block; width: 120px; height: 5px; margin: 18px auto 0; border-radius: 3px;
    background: linear-gradient(90deg, #2f8f5b 0 33.3%, #e4e7e5 33.3% 66.6%, #d92b2b 66.6%);
  }
  .about-us__body > .about-us__item { align-items: center; }
  .about-us__body .about-us__item-icon { flex-basis: 44px; max-width: 44px; margin-right: 16px; }
}

@media (max-width: 767px) {
  .about-us__slogan { font-size: 22px; }
  .about-us__body { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .about-us__body > .about-us__slogan { margin-bottom: 2px; }
  .about-us__body .about-us__item-icon { flex-basis: 32px; max-width: 32px; }
}