/* ==========================================================================
   Letoism — стили (основная раскладка под 1440px)

   Работает в паре с letoism.css:
   - letoism.css отвечает за шрифт, .wrapper (max-width 1440px + padding 16px),
     шапку, футер и акцентный красный цвет;
   - main.css отвечает за содержимое <main>: Луну, календарь, списки, страницу дня.

   Рабочая ширина контента: 1440 - 2 * 16 = 1408px.
   Размеры ниже подобраны под неё; всё, что меньше, обрабатывается в разделе 11.

   1. Переменные и тема
   2. База и навигация
   3. Главная: Луна и описание
   4. Таймлайн под Луной
   5. Списки дел (строки с процентами)
   6. Заголовок со стрелками (месяц, день, категория)
   7. Календарь месяца
   8. Страница дня
   9. Настройки
   10. Иконки (SVG-спрайты)
   11. Адаптив
   12. Календарь праздников (главная, страница дня, сводка)
   13. Календарь: целиком в экран высотой от 768px
   ========================================================================== */


/* 1. Переменные и тема ------------------------------------------------------ */

:root {
  --bg: #f5f5f8;
  --fg: #1b1d24;
  --card: #fff;
  --mut: #6b7280;
  --line: #dcdde5;

  --back: #ffffff0f;

  /* три градации дня */
  --good: #1fa85a;
  --mid: #e3a008;
  --bad: #e24b4b;

  /* цвет дня в календаре праздников */
  --act: #5fcf80; /* светлый зелёный: лучше действовать */
  --rest: #a61b1b; /* тёмно-красный: лучше отдохнуть */
  --hol: #2f6fe0; /* нерабочий день */

  /* размеры под 1440px */
  --gap-l: 32px;
  --gap-m: 16px;
  --text-max: 80ch; /* комфортная длина строки для текстовых блоков */
}

/* тёмная тема: автоматически по системе, если пользователь не выбрал светлую */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0e1017;
    --fg: #e6e8ee;
    --card: #171a24;
    --mut: #9aa1b2;
    --line: #2a2e3c;
    --act: #7be39a;
    --rest: #d0463e;
    --hol: #6f9cf2;
  }
}

/* тёмная тема, выбранная вручную в настройках */
:root[data-theme='dark'] {
  --bg: #0e1017;
  --fg: #e6e8ee;
  --card: #171a24;
  --mut: #9aa1b2;
  --line: #2a2e3c;
  --act: #7be39a;
  --rest: #d0463e;
  --hol: #6f9cf2;
}


/* 2. База и навигация ------------------------------------------------------- */

* {
  box-sizing: border-box;
}

/* шрифт задаёт letoism.css (Montserrat), здесь только цвета и каркас страницы */
body {
  min-height: 100vh;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--fg);

  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
  text-decoration: none;
}

/* боковые отступы даёт .wrapper из letoism.css, поэтому здесь их нет */
/* nav {
  display: flex;
  gap: 24px;
  padding: 14px 0;
  background: none;
  border: 0;
} */

nav a.on {
  outline: 1px solid var(--fg);
}

/* подменю модуля Луны */
#sub {
  display: flex;
  gap: 20px;
  padding: 0;
  color: var(--mut);
}

#sub:empty {
  display: none;
}

/* вертикальные отступы main задаёт letoism.css (32px 0) */
main {
  flex: 1;
  width: 100%;
}

small,
.off {
  color: var(--mut);
}
p.off {
  margin-top: 16px;
  font-size: 12px;
}

select {
  font: inherit;
  padding: 8px 10px;
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.subtitle {
  font-size: 16px;
  text-transform: uppercase;
  margin: 32px 0px 16px;
}


/* 3. Главная: Луна и описание ----------------------------------------------- */

/* Луна не растягивается на пол-экрана: максимум 520px, остальное — описание */
.hero {
  display: grid;
  grid-template-columns: minmax(320px, 520px) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}

/* блок 3D-Луны (без фона) */
.mw {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  text-align: center;
  background: none;
}

.mw canvas,
.mw svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* запасная плоская Луна, если нет WebGL */
.mw > div {
  width: 100%;
  height: 100%;
}

/* кнопка «вернуться к текущему дню» (скрывается из JS на текущем дне) */
.mw button {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--fg);
  cursor: pointer;
}

.mw button[hidden] {
  display: none;
}

/* название фазы — заголовок над описанием */
.phase {
  margin: 0 0 20px;
  font-size: 2.2em;
  line-height: 1.15;
}

/* описание: слева название параметра, справа значение */
.info {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 24px;
  max-width: 640px;
  margin: 0;
  font-size: 1.05em;
}

.info + .info {
  margin-top: 10px;
}

.info dt {
  color: var(--mut);
  min-width: 128px;
}

.info dt::after {
  content: ':';
}

.info dd {
  margin: 0;
}

/* крупное значение (освещённость) */
.info .big {
  font-size: 3em;
  line-height: 1;
  font-weight: 600;
}


/* 4. Таймлайн под Луной ----------------------------------------------------- */

.tlw {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 32px 0;
}

/* стрелки «день назад / день вперёд» */
.tlw > .tg {
  display: grid;
  place-items: center;
  padding: 10px;
  color: inherit;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}

/* полоса дней; на узких экранах прокручивается (выбранный день центрируется из JS) */
.tl {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  position: relative;
  scrollbar-width: none;
}

/* автоотступы центрируют полосу, когда она помещается, и не обрезают левый край при прокрутке */
.tl button:first-child {
  margin-left: auto;
}

.tl button:last-child {
  margin-right: auto;
}

.tl button {
  display: grid;
  justify-items: center;
  padding: 6px 8px;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 10px;
  opacity: 0.7;
  cursor: pointer;
}

.tl button:hover {
  opacity: 1;
  background: var(--card);
}

/* выбранный день */
.tl button.cur {
  opacity: 1;
  background: var(--card);
  outline: 2px solid var(--fg);
}


/* 5. Списки дел (строки с процентами) --------------------------------------- */

/* на 1440px строки идут в две колонки, иначе они растягиваются на 1400px */
.cats {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 12px 24px;
}

/* строка дела: иконка | название | шкала | процент (+ причины ниже) */
.cat,
.row {
  display: grid;
  grid-template-columns: 2.5em minmax(0, 1fr) 180px 3.5em;
  gap: 6px 16px;
  align-items: center;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.cat small,
.row small {
  grid-column: 2 / -1;
}

.cat em,
.row em {
  font-style: normal;
  text-align: right;
}

/* строка дня в списке категории: дата | шкала | оценка (+ причины ниже) */
.row {
  grid-template-columns: 6em minmax(0, 1fr) 12em;
}

.row small {
  grid-column: 1 / -1;
}

/* шкала в процентах (цвет задаётся из JS по градации дня) */
.bar {
  display: block;
  height: 10px;
  border-radius: 5px;
  background: var(--line);
  overflow: hidden;
}

.bar u {
  display: block;
  height: 100%;
}


/* 6. Заголовок со стрелками (месяц, день, категория) ------------------------ */

.bar2 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.bar2 h2 {
  flex: 1;
  margin: 0;
  font-size: 1.6em;
  line-height: 1.2;
}

/* заглавная только первая буква («Ноябрь 2026 г.», а не «Ноябрь 2026 Г.») */
.bar2 h2::first-letter {
  text-transform: uppercase;
}

/* название по центру между стрелками */
.bar2.center {
  justify-content: center;
}

.bar2.center h2 {
  flex: none;
  min-width: 11em;
  text-align: center;
}

.bar2 a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
}

/* кнопка «Список / Календарь» */
.bar2 .tg {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}


/* 7. Календарь месяца ------------------------------------------------------- */

/* 7 колонок по ~190px на рабочей ширине 1408px */
.grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;

  background-color: #fff;
  border-radius: var(--radius);
  border: 1px var(--line) solid;
  padding: 8px;
}

/* названия дней недели */
.wd {
  padding-bottom: 4px;
  text-align: center;
  font-weight: 600;
  color: var(--mut);
}

/* ячейка дня: число, фаза, лунные дни, знак, подпись градации */
.cell {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  min-height: 140px;
  padding: 10px 6px;
  font-size: 26px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background-color: var(--back);
}

.cell small {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: bold;
}

/* цвет ячейки по градации дня */
.cell.good {
  background: rgba(31, 168, 90, 0.45);
  border-color: var(--good);
}

.cell.mid {
  background: rgba(227, 160, 8, 0.45);
  border-color: var(--mid);
}

.cell.bad {
  background: rgba(226, 75, 75, 0.45);
  border-color: var(--bad);
}

/* подпись внизу ячейки: «Хороший день» и т.д. */
.vd {
  margin-top: auto;
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  line-height: 1.15;
  text-align: center;
}

/* легенда цветов: показывается только на узких экранах, где подписи в ячейках скрыты */
.legend {
  display: none;
}

.legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 3px;
  vertical-align: -1px;
}

.legend .good {
  background: var(--good);
}

.legend .mid {
  background: var(--mid);
}

.legend .bad {
  background: var(--bad);
}


/* 8. Страница дня ----------------------------------------------------------- */

/* полоса лунных суток внутри календарного дня */
.strip {
  display: flex;
  height: 36px;
  margin-bottom: 24px;
  border-radius: 10px;
  overflow: hidden;
}

.strip i {
  display: grid;
  place-items: center;
  font-size: 13px;
  font-style: normal;
  background: #6d5dfc55;
  border-right: 1px solid var(--bg);
}

/* список лунных суток и событий дня: не шире удобной строки чтения */
.tl2 {
  max-width: var(--text-max);
  padding: 0;
  list-style: none;
}

.tl2 li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.tl2 span {
  color: var(--mut);
}


/* 9. Настройки -------------------------------------------------------------- */

/* строки настроек не растягиваются на всю ширину, чтобы название и переключатель были рядом */
label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}


/* 10. Иконки (SVG-спрайты из assets/icons) ---------------------------------- */
/* Размер по умолчанию 32px. Другие размеры — добавить класс: s16, s20, s24, s48, s64 */

.ico {
  width: 32px;
  height: 32px;
  flex: none;
  display: inline-block;
  vertical-align: middle;
}

.s16 {
  width: 16px;
  height: 16px;
}

.s20 {
  width: 20px;
  height: 20px;
}

.s24 {
  width: 24px;
  height: 24px;
}

.s48 {
  width: 48px;
  height: 48px;
}

.s64 {
  width: 64px;
  height: 64px;
}


/* 11. Адаптив --------------------------------------------------------------- */
/* Основа выше рассчитана на 1440px. Дальше стили упрощаются по мере сужения. */

/* Ноутбук (до 1280px): Луна меньше, зазоры уже */
@media (max-width: 1280px) {
  .hero {
    grid-template-columns: minmax(300px, 440px) minmax(0, 1fr);
    gap: 40px;
  }

  .phase {
    font-size: 2em;
  }

  .cat,
  .row {
    gap: 6px 12px;
  }

  .cat {
    grid-template-columns: 2.2em minmax(0, 1fr) 140px 3.4em;
  }

  .cell {
    min-height: 124px;
    font-size: 24px;
  }
}

/* Планшет (до 1024px): списки в одну колонку */
@media (max-width: 1024px) {
  .cats {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .hero {
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: 28px;
  }

  .grid {
    gap: 6px;
  }

  .cell {
    min-height: 112px;
  }

  .bar2 h2 {
    font-size: 1.4em;
  }
}

/* Луна над описанием в одну колонку */
@media (max-width: 700px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .mw {
    max-width: 420px;
    margin: 0 auto;
  }

  .phase {
    font-size: 1.6em;
  }

  .info .big {
    font-size: 2.4em;
  }
}

/* До 640px: текст в ячейках календаря мельче, чтобы помещался */
@media (max-width: 640px) {
  .grid {
    gap: 4px;
  }

  .cell {
    padding: 4px 1px;
    font-size: 12px;
  }

  .cell small {
    font-size: 10px;
  }

  .vd {
    font-size: 8px;
  }
}

/* До 560px: подписи в ячейках не помещаются, вместо них показывается легенда под календарём */
@media (max-width: 560px) {
  .cell .vd {
    display: none;
  }

  .legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--mut);
  }
}

/* Мобильная версия (от 320px): в календаре остаются число, фаза Луны и цвет дня */
@media (max-width: 480px) {
  nav {
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 10px 0;
  }

  .hero {
    gap: 16px;
  }

  .info {
    gap: 6px 12px;
  }

  .tlw {
    margin: 18px 0;
  }

  /* списки дел */
  .cat,
  .row {
    gap: 4px 8px;
    padding: 8px;
  }

  .cat {
    grid-template-columns: 24px minmax(0, 1fr) 56px 2.8em;
  }

  .row {
    grid-template-columns: 3.8em minmax(0, 1fr);
  }

  .row em {
    grid-column: 1 / -1;
    text-align: left;
  }

  /* заголовок со стрелками: кнопка и выбор дел переносятся на вторую строку */
  .bar2 {
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
  }

  .bar2 h2 {
    flex: 1 1 0;
    min-width: 0;
    font-size: 1.05em;
  }

  .bar2 a {
    padding: 0 4px;
  }

  .bar2.center h2 {
    flex: 1 1 0;
    min-width: 0;
  }

  .bar2 select,
  .bar2 .tg {
    flex: 1 1 100%;
    max-width: 100%;
    justify-content: center;
  }

  /* календарь */
  .grid {
    gap: 2px;
  }

  .wd {
    font-size: 11px;
    overflow: hidden;
  }

  .cell {
    gap: 1px;
    min-height: 0;
    padding: 3px 0;
    font-size: 11px;
    border-radius: 6px;
  }

  .cell small {
    display: none;
  }

  .cell > svg {
    width: 22px;
    height: 22px;
  }

  /* страница дня */
  .strip {
    height: 28px;
    margin-bottom: 14px;
  }

  /* настройки */
  label {
    padding: 12px 0;
  }

  label select {
    max-width: 60%;
  }
}


/* 12. Календарь праздников -------------------------------------------------- */

/* ячейка дня: число, подпись главного праздника, цветная нижняя линия */
.cell.hd {
  min-height: 120px;
}

/* лучше действовать: сплошная светло-зелёная линия */
.cell.hd.t-act {
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-bottom-color: var(--act);
}

/* лучше отдохнуть: тёмно-красная линия */
.cell.hd.t-rest {
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-bottom-color: var(--rest);
}

/* нерабочий день — число синим */
.cell.hd.off b {
  color: var(--hol);
}

.cell.hd.today {
  outline: 2px solid var(--color-accent);
}

/* подпись главного праздника: не больше трёх строк */
.hl {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
  word-break: break-word;
}

/* легенда: пример линии для каждого цвета */
.legend2 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 16px 0;
  font-size: 14px;
  color: var(--mut);
}

.sw {
  display: inline-block;
  width: 22px;
  height: 0;
  margin-right: 6px;
  vertical-align: middle;
  border-bottom: 4px solid;
}

.sw.act {
  border-color: var(--act);
}

.sw.rest {
  border-color: var(--rest);
  border-bottom-style: solid;
}

.sw.off {
  border-color: var(--hol);
}

/* сводка дня (новость): картинка и текст */
.digest-link {
  display: block;
  margin-top: 64px;
}

.news {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px;
  align-items: center;
  margin: 24px 0;
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.news img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  background: var(--line);
}

.news h3 {
  margin: 4px 0 12px;
  font-size: 1.4em;
  line-height: 1.25;
}

.news p {
  max-width: var(--text-max);
  margin: 0 0 10px;
}

/* страница дня */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
}

.chip.act {
  border: 2px solid var(--act);
}

.chip.rest {
  border: 2px dashed var(--rest);
}

.why {
  max-width: var(--text-max);
  margin: 0 0 16px;
  padding-left: 20px;
  font-size: 14px;
  color: var(--mut);
}

h1.main {
  margin: 16px 0 4px;
  font-size: 2.2em;
  line-height: 1.15;
}

.desc {
  max-width: var(--text-max);
}

.desc p {
  margin: 10px 0;
}

/* что отмечают ещё */
.kinds {
  display: grid;
  gap: 12px;
  max-width: var(--text-max);
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.kinds li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.kinds span {
  display: grid;
}

/* карточки поверий: 4 в ряд на 1408px */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.card {
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.card p {
  margin: 0 0 10px;
}

/* адаптив календаря праздников */
@media (max-width: 1280px) {
  .cell.hd {
    min-height: 108px;
  }

  .hl {
    font-size: 12px;
  }
}

@media (max-width: 1024px) {
  .news {
    gap: 20px;
    padding: 18px;
  }

  h1.main {
    font-size: 1.8em;
  }
}

@media (max-width: 640px) {
  .news {
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 18px 0;
    padding: 14px;
    border-radius: 12px;
  }

  .hl {
    font-size: 10px;
  }

  .cards {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
  }

  .card {
    padding: 14px;
    border-radius: 12px;
  }

  h1.main {
    font-size: 1.6em;
  }
}

@media (max-width: 480px) {
  /* остаются число и цветная линия, подписи праздников скрыты */
  .cell.hd {
    min-height: 44px;
  }

  .hl {
    display: none;
  }
}


/* 13. Календарь: целиком в экран высотой от 768px --------------------------- */
/* Ширина .grid считается от высоты окна, чтобы все 6 строк + дни недели + легенда
   помещались по вертикали. Ниже 768px по высоте календарь не уменьшается
   (считаем, как для 768px) и просто прокручивается. Содержимое ячеек масштабируется
   вместе с шириной сетки (единицы cqw), поэтому в выше окне всё становится крупнее.

   Настройка:
   --cal-offset: всё, что на странице кроме самой сетки: шапка 90px, отступы wrapper и main,
                 заголовок месяца, легенда. Если высота шапки или заголовка изменится — поправьте.
   --cal-ratio:  пропорция ячейки (ширина / высота).
   --cal-gap:    зазор между ячейками. */

@media (min-width: 701px) {
  /* .grid {
    --cal-offset: 280px;
    --cal-ratio: 1.35;
    --cal-gap: 6px;

    gap: var(--cal-gap);
    margin-inline: auto;
    container-type: inline-size;

    width: min(100%, calc(7 * var(--cal-ratio) * (max(100vh, 768px) - var(--cal-offset) - 28px - 6 * var(--cal-gap)) / 6 + 6 * var(--cal-gap)));
    width: min(100%, calc(7 * var(--cal-ratio) * (max(100svh, 768px) - var(--cal-offset) - 28px - 6 * var(--cal-gap)) / 6 + 6 * var(--cal-gap)));
  } */

  .calendar {
    --cal-offset: 280px;
    --cal-ratio: 1.35;
    --cal-gap: 6px;

    gap: var(--cal-gap);
    margin-inline: auto;
    container-type: inline-size;

    /* запасной вариант для браузеров без svh */
    width: min(100%, calc(7 * var(--cal-ratio) * (max(100vh, 768px) - var(--cal-offset) - 28px - 6 * var(--cal-gap)) / 6 + 6 * var(--cal-gap)));
    width: min(100%, calc(7 * var(--cal-ratio) * (max(100svh, 768px) - var(--cal-offset) - 28px - 6 * var(--cal-gap)) / 6 + 6 * var(--cal-gap)));
  }

  .grid .wd {
    padding: 0;
    font-size: max(11px, 1.6cqw);
    line-height: 28px;
  }

  .grid .cell,
  .grid .cell.hd {
    gap: 0.3cqw;
    min-height: 0;
    padding: 0.6cqw 0.3cqw;
    aspect-ratio: var(--cal-ratio);
    font-size: 2.6cqw;
    line-height: 1.1;
    border-radius: 0.9cqw;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .grid .cell > svg {
    width: 3.4cqw;
    height: 3.4cqw;
  }

  .grid .cell small {
    gap: 0.3cqw;
    font-size: max(9px, 1.5cqw);
    line-height: 1.1;
  }

  /* в обычном календаре подпись градации не влезает — вместо неё легенда под сеткой */
  .grid .cell .vd {
    display: none;
  }

  .legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--mut);
  }

  /* календарь праздников: подпись праздника в две строки */
  .grid .hl {
    -webkit-line-clamp: 2;
    font-size: max(9px, 1.4cqw);
    line-height: 1.15;
  }
}