/* ==========================================================================
   Поправки для разметки разделов, взятой с их сайта как есть.

   Их страницы рассчитаны на широкий экран. Две вещи из-за этого ломают
   телефон, и обе — не ошибка их вёрстки, а следствие того, что мы берём
   готовый HTML без их сборщика:

   1. Иллюстрации вставлены прямо в разметку и заданы атрибутом ширины:
      width="531", width="799", width="1569". Атрибут — лишь подсказка, CSS
      его перекрывает, но сам по себе он на узком экране не сжимается, и
      страница уезжает вбок. На «О нас» такой рисунок растягивал документ до
      1569px при экране 390.

   2. Широкая таблица на «Купить криптовалюту» не сжимается ниже своего
      содержимого — таблицы так устроены. Ей нужна собственная прокрутка.
   ========================================================================== */

/* Страховка на случай, если что-то ещё окажется шире экрана: полоса
   прокрутки у самой страницы не появляется. `clip` не создаёт контейнер
   прокрутки, поэтому закреплённая шапка продолжает работать; `hidden` —
   запасной вариант для браузеров, где `clip` ещё нет. */
.tw-section-body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* ------------------------------------------------------------ иллюстрации
   Соразмерно уменьшаем и высоту: если сжать только ширину, рисунок
   отцентрируется в прежней высокой рамке и вокруг останется пустота. */
.tw-section-body svg[viewBox] {
  max-width: 100%;
  height: auto;
}

.tw-section-body img,
.tw-section-body video,
.tw-section-body canvas,
.tw-section-body iframe {
  max-width: 100%;
  height: auto;
}

/* Флекс- и грид-дети по умолчанию не сжимаются ниже своего содержимого —
   именно поэтому широкий блок утаскивал за собой всю страницу. */
.tw-section-body [class*="flex"] > *,
.tw-section-body [class*="grid"] > * {
  min-width: 0;
}

/* Центрированные блоки, размер которых задан шире доступного места: на
   «RWA» такой блок выходил за край на 24px. */
.tw-section-body [class*="mx-auto"] {
  max-width: 100%;
}

/* ------------------------------------------------------------------ таблицы
   Таблица не сжимается ниже своего содержимого — так они устроены. На
   «Купить криптовалюту» такая таблица шириной 1079px утаскивала страницу
   вбок вплоть до планшета, поэтому прокрутка даётся ей до 1080px: дальше
   она помещается сама. Прокручивается таблица, а не страница. */
@media (max-width: 1079px) {
  .tw-section-body table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ------------------------------------------------------------------- отступы
   По краям узкого экрана нужен воздух: у их страниц отступы заданы классами,
   которые считают ширину от большого контейнера. */
@media (max-width: 743px) {
  .tw-section-body > main,
  .tw-section-body > section {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
  .tw-section-body > main > section,
  .tw-section-body > main > div > section {
    box-sizing: border-box;
    max-width: 100%;
  }
}

@media (max-width: 380px) {
  .tw-section-body > main,
  .tw-section-body > section {
    padding-left: 12px;
    padding-right: 12px;
  }
}