/* === Система 10-Ц === */
.system-10c {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.system-10c-title {
  font-size: 1.5em; /* размер шрифта относительно базового */
  margin-top: 12px; /* отступ сверху */
  margin-bottom: 4px; /* отступ снизу */
  font-weight: 500; /* визуальный акцент текста */
  color: #ffffff;   /* Цвет*/
  text-shadow: 0 2px 6px rgba(42,77,105,0.1); /* лёгкая тень — создаёт глубину */
}
.system-10c-title a {
  text-decoration: none;
}
.system-10c-title a:hover {
  text-decoration: none;
}
.main__values {
  max-width: 900px;           /* ограничивает ширину блока для читаемости */
  text-align: center;         /* выравнивает текст внутри по центру */
  margin: 0px auto 0 auto;   /* отступ сверху и горизонтальное центрирование */
  display: flex;              /* включает flex-контейнер */
  flex-direction: column;     /* размещает дочерние элементы вертикально */
  align-items: center;        /* центрирует элементы по горизонтали */
  justify-content: center;    /* центрирует элементы по вертикали (если есть высота) */
}
.values__grid {
  display: grid; /* включает CSS Grid — мощный инструмент для построения сеток */
  grid-template-columns: repeat(6, 1fr); /* создаёт 6 равных колонок */
  gap: 18px; /* расстояние между ячейками — по горизонтали и вертикали */
  margin: 0px auto 0 auto; /* отступ сверху и центрирование по горизонтали */
  justify-items: center; /* выравнивает содержимое каждой ячейки по центру */
  border: 2px solid rgba(19, 128, 201, 0.15); /* тонкая рамка с прозрачным синим оттенком */
  padding: 12px 12px; /* внутренние отступы — сверху/снизу и по бокам */
  background: #faf5e4; /* светлый фон — тёплый, не белый */
  max-width: 900px; /* ограничивает ширину сетки */
  border-radius: 12px; /* скруглённые углы — визуальная мягкость */
  overflow: hidden; /* обрезает всё, что выходит за границы блока */
}

/*
  Адаптивность для сетки ценностей (values__grid):
  — При ширине экрана до 1200px: 4 колонки (для планшетов и небольших ноутбуков).
  — До 900px: 3 колонки (для крупных смартфонов и портретных планшетов).
  — До 600px: 2 колонки, уменьшенные отступы и размеры иконок (для обычных смартфонов).
  — До 400px: 1 колонка, минимальные отступы (для очень маленьких экранов).
  Это обеспечивает удобное и красивое отображение ценностей на любых устройствах.
*/
@media (max-width: 1200px) {
  .values__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 900px) {
  .values__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .values__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 8px;
  }
  .value-item img {
    width: 48px;
    height: 48px;
  }
}
@media (max-width: 400px) {
  .values__grid {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 4px;
  }
}
.value-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 1.1em;
  line-height: 1.2;
  text-align: left;
}
.value-item img {
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  max-width: 100%;
  height: auto;
  display: block;
}
.value-name {
  font-weight: bold;
  color: #2a4d69;
  font-size: 1.0em;
}