Сколько колонок покажет сетка при двух перекрывающихся медиавыражениях

.catalog {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .catalog { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .catalog { grid-template-columns: repeat(4, 1fr); }
}

• Две: срабатывает первое подходящее медиавыражение, дальше браузер не проверяет.
• Одну: базовое правило вне медиавыражений имеет приоритет над ними.
• Четыре: истинны оба медиавыражения, специфичность у правил одинаковая, поэтому побеждает то, что идёт ниже по файлу.
• Четыре: медиавыражение с большей граничной шириной всегда приоритетнее, потому что браузер сам сортирует блоки по возрастанию условий.