/* Общее для блоков внутренних страниц программ (pg-*): правка этого
   файла задевает все три шаблона программ сразу, поэтому здесь - только
   то, что действительно совпадает у нескольких блоков. Своё у блока - в
   его собственном файле стилей; сюда не добавлять.

   Обёртка контента отдельного класса не заводит: полоса 1440 с контентом
   1328 (отступ по бокам 56px / 20px на телефоне) - это сайтовый .wrap из
   base.css, он уже загружен на каждой странице через head.tpl. Блоки
   программ просто ставят класс "wrap" на свой внутренний контейнер. */

/* Сетка карточек в ряд: на десктопе колонок столько, сколько карточек,
   на телефоне - список в столбик. Раскладку используют три блока: "Форматы и цены" и
   "Карточки" (карточка 425,33px при зазоре ряда 26), "Другие программы"
   (416px при зазоре 40) и список результата. Ширину карточки никто не
   задаёт числом - её считает сама сетка из ширины .wrap и зазора ряда,
   поэтому 425,33 нигде в коде и не написано.

   Зазор ряда остался в файле каждого блока, хотя у цен и у карточек он
   одинаковый (26). Это не дублирование примитива: числа взяты из двух
   разных секций макета и совпали, а не выведены из общего правила. Вынеси
   их сюда - и при правке макета в одном блоке придётся или заводить
   исключение, или молча менять геометрию второго. Общими здесь остаются
   только раскладка и токены отступов из tokens.css (--gap-section 44,
   --section-y-m 52), которые блоки программ и так зовут по имени. */
.pg-ryad {
  display: grid;
  /* Колонок столько, сколько карточек, и все одной ширины. Жёсткого
     "repeat(3, 1fr)" здесь быть не может: в макете карточки объявлены как
     fill_container, то есть делят ряд поровну сколько бы их ни было, и у
     взрослых их две, а не три. С тремя колонками на две карточки блок
     выходил на 25px выше эталона - текст переносился в более узкой
     карточке. Число карточек задаёт заказчица в админке, и от него
     раскладка не должна ломаться. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

@media (max-width: 860px) {
  .pg-ryad {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }
}