@media (max-width: 360px) {
  body { min-width: 320px; }
  .logo { width: 72px; }
  .contact-link { font-size: 13px; padding: 8px 14px; }
}

@media (max-width: 640px) {
  .logo { width: 72px; }
  .contact-link { font-size: 12px; }

  .casebox__index {
    left: calc(100% - 64px);
    transform: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .card {
    transition: box-shadow 0.25s ease;
  }

  .card-inner {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .card:hover .card-inner {
    transform: scale(1.035);
  }

  .card:hover {
    box-shadow:
      0 28px 60px var(--c-black-085),
      inset 0 0 0 1px var(--c-white-muted);
  }
}

@media (max-width: 860px){
  .note-grid{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .page-title{ font-size: 28px; }
  .topnav{ gap: 8px; }
}

@media (max-width: 520px){
  .header-content{ padding: 0 12px; }
  .header-left{ gap: 12px; }
  .logo{ width: 88px; }
  .contact-link{ padding: 9px 14px; font-size: 14px; }
  .topnav__link{ padding: 7px 10px; font-size: 13px; }
  .page{ padding: 18px 12px 40px; }
}

/* На небольших экранах страница должна занимать всю доступную ширину без центрального выравнивания.
   Убираем максимальную ширину и отступы по бокам. */
@media (max-width: 820px) {
  .page {
    max-width: none;
    margin: 0;
  }

  /* В мобильной шапке выравниваем кнопку связи по правому краю.
     Контейнер header-right расширяется на всю ширину и распределяет бургер и кнопку. */
  .header-right {
    flex: 1;
    display: flex;
  }
  .header-right .contact-link {
    margin-left: auto;
  }
}