/* === responsive.css — медиа-запросы для узких экранов (<= 768px) === */

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
  .sl-body, .ch-banner { padding: 18px 20px; }
  .sl-body { padding-bottom: 32px; }
  .grid-2, .grid-3, .hat-grid, .style-grid { grid-template-columns: 1fr; }
  .idx-cols { columns: 1; }
  .cover-frame { padding: 20px 18px 28px; }
  .cover-top, .cover-headline { max-width: 100%; }
  .cover-title { font-size: clamp(1.9rem, 8.5vw, 2.7rem); }
  .cover-subtitle { white-space: normal; }
  .cover-bottom { align-items: stretch; }
  .cover-btn { width: 100%; justify-content: center; }
  .btn-toc { top: 10px; right: 14px; }
  .ch-title { font-size: 1.3rem; }
  .results-card { padding: 28px 22px; }
  /* Поля обвязки задаёт header.css через padding-inline. Шорткат `padding: 0 16px`
     стоял здесь со времён стеклянных островов и обнулял бы вертикальный отступ
     вуали; заодно он молча перебивал собственный медиазапрос header.css на 640. */
  .match-game__board { gap: 8px 10px; }
  .match-item { padding: 10px 11px; font-size: .82rem; }
  .flashcards__grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}