/* Страницы выбора: главная («Какой у тебя класс?») и страница класса
   со списком предметов. Лист тетради: клетка и красная линия полей.

   Клетка — 24px, и все отступы листа ей кратны. Меняешь размер клетки —
   поменяй и их, иначе плитки встанут поперёк линеек */

.hub {
  display: flex;
  flex-direction: column;
  /* Лист тянется до низа окна, подвал стоит под ним. Без этого на главной
     клетка обрывалась бы сразу под плитками, а ниже шла пустая бумага */
  min-height: 100vh;
  min-height: 100dvh;
}

.hub__sheet {
  flex: 1;
  box-sizing: border-box;
  padding: 48px 24px 72px 120px;
  /* Первой идёт линия полей: слои рисуются сверху вниз, и под клеткой
     красная линия была бы изрезана голубыми */
  background-image:
    linear-gradient(to right, transparent 95px, var(--margin-line) 95px, var(--margin-line) 97px, transparent 97px),
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: auto, 24px 24px, 24px 24px;
}

/* Ссылка «← Все классы» над заголовком. Сам блок — class-nav */
.hub__crumbs {
  min-height: 24px;
}

.hub__title {
  margin: 0;
  font-family: var(--font-title);
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -0.01em;
}

.hub__lead {
  max-width: 600px;
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 24px;
}

@media (max-width: 860px) {
  /* На телефоне поля узкие: при полях в четыре клетки на плитки
     осталось бы две трети экрана */
  .hub__sheet {
    padding: 24px 16px 48px 24px;
    background-image:
      linear-gradient(to right, transparent 11px, var(--margin-line) 11px, var(--margin-line) 13px, transparent 13px),
      linear-gradient(to right, var(--grid) 1px, transparent 1px),
      linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  }

  .hub__title {
    font-size: 32px;
  }
}