:root {
  /* Шрифт всей страницы. Для системного шрифта можно указать, например, Arial, sans-serif. */
  --kru-font: "KruText", Arial, sans-serif;
  /* Основная палитра. Дополнительные оттенки фотографий остаются в стилях разделов. */
  --kru-ink: #083d61;
  --kru-blue: #00518b;
  --kru-muted: #536b79;
  --kru-header-blue: #02508f;
  --kru-deep-blue: #073558;
  /* Общая ширина нижних разделов и поля: 15 px на широком экране, до 24 px в узком. */
  --kru-container-base: 1140px;
  --kru-container-max: var(--kru-container-base);
  --kru-edge-wide: 15px;
  --kru-edge-narrow: 24px;
  --kru-edge: clamp(
    var(--kru-edge-wide),
    calc(var(--kru-edge-wide) + (var(--kru-container-base) - 100vw) * 0.1),
    var(--kru-edge-narrow)
  );
  /* Промежутки между карточками и разделами на компьютере. */
  --kru-gap: 16px;
  --kru-space: 48px;
  /* Четыре цвета плиток быстрого доступа. */
  --kru-service-one: #e9f1f8;
  --kru-service-two: #e7f0ed;
  --kru-service-three: #f4eee2;
  --kru-service-four: #ecedf4;
  /* Белые подписи поверх фотографий: обычное состояние и наведение. */
  --kru-caption: rgba(255, 255, 255, 0.78);
  --kru-caption-hover: rgba(255, 255, 255, 0.84);
}

/* Планшет: общие промежутки становятся компактнее. */

@media (max-width: 991px) {
  :root {
    --kru-gap: 12px;
    --kru-space: 36px;
  }
}

/* Телефон: ещё более компактные промежутки. */

@media (max-width: 575px) {
  :root {
    --kru-gap: 10px;
    --kru-space: 28px;
  }
}

/* ШИРОКИЕ ЭКРАНЫ. Все контрольные размеры контейнера собраны здесь.
   До 1440 px сохраняется прежний вид. Между точками ширина растёт плавно.
   1440  1140; 1980  1400; 2560  1600; 3840 и выше  максимум 1800 px.
   Формулы используют ширину окна браузера в CSS-пикселях. */

@media (min-width: 1440px) {
  :root {
    --kru-container-max: clamp(1140px, calc(1140px + (100vw - 1440px) * 0.4814814815), 1400px);
    --kru-gap: clamp(16px, calc(16px + (100vw - 1440px) * 0.0148148148), 24px);
  }
}

@media (min-width: 1980px) {
  :root {
    --kru-container-max: clamp(1400px, calc(1400px + (100vw - 1980px) * 0.3448275862), 1600px);
  }
}

@media (min-width: 2560px) {
  :root {
    --kru-container-max: clamp(1600px, calc(1600px + (100vw - 2560px) * 0.15625), 1800px);
  }
}