/* ==========================================================================
   Footer
   320–575 · Figma 3:3933 (425×96) — две строки: 4 + 2
     24 (pt) + 20 + 8 (row-gap) + 20 + 24 (pb) = 96
   576–1023 · Figma 3:3619 (576×68), 3:3684 (768×68) — одна строка
     24 (pt) + 20 + 24 (pb) = 68
   1024+    · Figma 3:3737 (1024×70), 3:3802 (1280×70), 3:3892 (4362×70) —
              та же строка, шрифт 16 вместо 14, зазор между ссылками те же 16
     24 (pt) + 22 + 24 (pb) = 70   (правок не требует, высота идёт из токенов)
     На 1920+ строка так же стоит по центру контейнера 1872 — в макете её
     края 653.5 и 1218.5, то есть центр 936 = 1872 / 2
   ========================================================================== */

.footer {
  background-color: var(--color-bg-base);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  /* row-gap на мобильном брейкпоинте несёт .footer__break, поэтому здесь 0 */
  gap: var(--spacing-0) var(--spacing-lg);
  padding-block: var(--spacing-xl);
  /* hidden — запасной путь для Safari 15.4, где clip ещё не было */
  overflow: hidden;
  overflow: clip;
  color: var(--color-text-subtle);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-text-md);
  letter-spacing: var(--letter-spacing-uppercase);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Разрыв строки после «Contacts».
   Сами по себе ссылки перестают помещаться в одну строку только около 549px,
   поэтому на мобильном брейкпоинте ломаем строку принудительно — так граница
   между 96 и 68 совпадает с брейкпоинтом макета, а не с длиной текста.
   Разделитель занимает собственную flex-строку, и её высота (8px) работает
   как row-gap макета — поэтому row-gap самого контейнера здесь 0. */
.footer__break {
  flex-basis: 100%;
  height: var(--spacing-md);
}

@media (min-width: 576px) {
  .footer__inner {
    row-gap: var(--spacing-md);
  }

  .footer__break {
    display: none;
  }
}