/**
 * ATB Global Layout
 *
 * Назначение:
 * - единый стандарт ширины контейнеров сайта;
 * - единые боковые отступы;
 * - использовать во всех рабочих блоках;
 * - не использовать глобальный [class*="__container"].
 */

:root {
	--atb-container-default: 1240px;
	--atb-container-wide: 1320px;
	--atb-container-full: 1440px;
	--atb-container-narrow: 920px;

	--atb-gutter: 24px;

	--atb-section-y: 96px;
	--atb-section-y-md: 72px;
	--atb-section-y-sm: 48px;
}

.atb-container {
	width: min(calc(100% - (var(--atb-gutter) * 2)), var(--atb-container-default));
	max-width: var(--atb-container-default);
	margin-left: auto;
	margin-right: auto;
}

.atb-container--wide {
	width: min(calc(100% - (var(--atb-gutter) * 2)), var(--atb-container-wide));
	max-width: var(--atb-container-wide);
}

.atb-container--full {
	width: min(calc(100% - (var(--atb-gutter) * 2)), var(--atb-container-full));
	max-width: var(--atb-container-full);
}

.atb-container--narrow {
	width: min(calc(100% - (var(--atb-gutter) * 2)), var(--atb-container-narrow));
	max-width: var(--atb-container-narrow);
}

.atb-section {
	padding-top: var(--atb-section-y);
	padding-bottom: var(--atb-section-y);
}

.atb-section--compact {
	padding-top: 64px;
	padding-bottom: 64px;
}

.atb-section--tight {
	padding-top: 40px;
	padding-bottom: 40px;
}

@media (max-width: 1024px) {
	:root {
		--atb-gutter: 24px;
		--atb-section-y: var(--atb-section-y-md);
	}
}

@media (max-width: 768px) {
	:root {
		--atb-gutter: 16px;
		--atb-section-y: var(--atb-section-y-sm);
	}
}