/* ==========================================================================
   Карточки с иконками (Figma: Шаблон-конструктор → Блок карточек с иконками).
   Серая секция (#F6F6F6). Поля 24·20 / 30 / 40 / 40 — с 1440 боковые поля
   секции в макете 40, а не 50, как у остальных блоков: сетка шире на 20px.
   Заголовок → подзаголовок 12 / 16 / 20 / 20; интро → сетка 28 / 28 / 30 / 40.
   Ширина интро 335 / 555 / 652 / 925.
   ========================================================================== */

.cards-icons {
  padding-block: 24px;
  background-color: var(--color-light-grey);
}

.cards-icons__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.cards-icons__intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cards-icons__lead {
  font-size: 18px;
  line-height: 22px;
  color: var(--text-muted);
}

.cards-icons__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

@media (min-width: 768px) {
  .cards-icons { padding-block: 30px; }

  .cards-icons__intro {
    gap: 16px;
    max-width: 555px;
  }

  .cards-icons__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1025px) {
  .cards-icons { padding-block: 40px; }
  .cards-icons__inner { gap: 30px; padding-inline: 40px; }

  .cards-icons__intro {
    gap: 20px;
    max-width: 652px;
  }
}

@media (min-width: 1441px) {
  .cards-icons__inner { gap: 40px; }
  .cards-icons__intro { max-width: 925px; }

  .cards-icons__lead {
    font-size: 24px;
    line-height: 30px;
  }
}