:root {
	/* Определяем глобальные переменные для ширины сетки и отступов между колонками */
	--grid-width: 1240px; /* ширина сетки */
	--grid-gutter: 1.5em; /* отступ между колонками*/
}

.container {
	/* Устанавливаем максимальную ширину контейнера, которая учитывает ширину сетки и отступы */
	max-width: calc(var(--grid-width) + var(--grid-gutter) * 2);
	/* Минимальная ширина контейнера, чтобы адаптироваться под мобильные устройства */
	min-width: calc(320px + var(--grid-gutter) * 2);
	padding: 0 var(--grid-gutter); /* Отступы внутри контейнера */
	margin: auto;
}

.row { /*Ряд с меню*/
	/* Используем Flexbox для создания ряда с колонками */
	display: flex;
	/* Убираем отрицательные отступы для выравнивания колонок */
	margin: 0 calc(var(--grid-gutter) * -1);
}

.col {
	/* Ширина колонки определяется содержимым */
	width: fit-content;
	/* Отступы внутри колонки */
	/* padding: 0 var(--grid-gutter);  */
}

.col--lead {
	/* Колонка занимает всё доступное пространство */
	flex: 1;
}

.col--center {
	/* Центрируем содержимое колонки горизонтально и вертикально */
	display: flex;
	align-items: center;
	justify-content: center;
}

.col--right {
	/* Выравниваем содержимое колонки по правому краю */
	display: flex;
	justify-content: right;
}

  @media (max-width: 720px) {
      .container {
          padding: 0 1em; /* Уменьшаем отступы для мобильных устройств */
      }
  }