/* ============================================
   RESPONSIVE
   Глобальные адаптивные правки и переопределения,
   которые не вписываются в конкретный компонент.
   
   Основные media queries вынесены inline в pages.css
   и layout.css (mobile-first подход).
   
   Этот файл — для общих корректировок:
   - изменение контейнера на маленьких экранах;
   - правки переменных под брейкпоинты;
   - точечные переопределения.
   ============================================ */

/* На очень маленьких экранах уменьшаем горизонтальные отступы контейнера */
@media (max-width: 640px) {
  .header__logo svg,
  .footer__logo-image {
    width: 150px;
    flex-basis: 150px;
  }
}

@media (max-width: 480px) {
  :root {
    --container-padding: 16px;
  }
}

/* На больших экранах header чуть выше */
@media (min-width: 1200px) {
  :root {
    --header-height: 84px;
  }
}