/* bootstrap-grid.css */
:root {
	/* Десктоп */
	--desktop-columns: 12;
	--desktop-gutter: 20px;
	--desktop-container-max: calc(12 * 91px + 11 * 20px);
	/* 1312px */

	/* Промежуточный десктоп */
	--intermediate-container: 1190px;
	--intermediate-gutter: 18px;

	/* Планшет */
	--tablet-container: 720px;
	--tablet-gutter: 16px;

	/* Мобилка */
	--mobile-columns: 2;
	--mobile-gutter: 10px;
	--mobile-margin: 15px;

	/* Брейкпоинты */
	--breakpoint-mobile: 390px;
	--breakpoint-tablet: 768px;
	--breakpoint-intermediate: 1200px;
	--breakpoint-desktop: 1440px;
	--breakpoint-large: 1920px;
}

/* Базовые стили для мобильных устройств */
.container {
	width: 100%;
	padding-right: var(--mobile-margin);
	padding-left: var(--mobile-margin);
	margin-right: auto;
	margin-left: auto;
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin-right: calc(-1 * var(--mobile-gutter) / 2);
	margin-left: calc(-1 * var(--mobile-gutter) / 2);
}

/* Колонки */
[class*="col-"] {
	position: relative;
	width: 100%;
	padding-right: calc(var(--mobile-gutter) / 2);
	padding-left: calc(var(--mobile-gutter) / 2);
}

/* Универсальные процентные колонки */
.col-1 {
	flex: 0 0 8.333333%;
	max-width: 8.333333%;
}

.col-2 {
	flex: 0 0 16.666667%;
	max-width: 16.666667%;
}

.col-3 {
	flex: 0 0 25%;
	max-width: 25%;
}

.col-4 {
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}

.col-5 {
	flex: 0 0 41.666667%;
	max-width: 41.666667%;
}

.col-6 {
	flex: 0 0 50%;
	max-width: 50%;
}

.col-7 {
	flex: 0 0 58.333333%;
	max-width: 58.333333%;
}

.col-8 {
	flex: 0 0 66.666667%;
	max-width: 66.666667%;
}

.col-9 {
	flex: 0 0 75%;
	max-width: 75%;
}

.col-10 {
	flex: 0 0 83.333333%;
	max-width: 83.333333%;
}

.col-11 {
	flex: 0 0 91.666667%;
	max-width: 91.666667%;
}

.col-12 {
	flex: 0 0 100%;
	max-width: 100%;
}

.col-auto {
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
}

/* Мобильная сетка (до 767px) */
.col-mobile-1 {
	flex: 0 0 50%;
	max-width: 50%;
}

.col-mobile-2 {
	flex: 0 0 100%;
	max-width: 100%;
}


/* Планшет (768px - 1199px) */
@media (min-width: 768px) {
	.container {
		max-width: var(--tablet-container);
		padding-right: calc(var(--tablet-gutter) / 2);
		padding-left: calc(var(--tablet-gutter) / 2);
	}

	.row {
		margin-right: calc(-1 * var(--tablet-gutter) / 2);
		margin-left: calc(-1 * var(--tablet-gutter) / 2);
	}

	[class*="col-"] {
		padding-right: calc(var(--tablet-gutter) / 2);
		padding-left: calc(var(--tablet-gutter) / 2);
	}

	/* Планшетные колонки */
	.col-tablet-1 {
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}

	.col-tablet-2 {
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}

	.col-tablet-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.col-tablet-4 {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	.col-tablet-5 {
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}

	.col-tablet-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-tablet-7 {
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}

	.col-tablet-8 {
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

	.col-tablet-9 {
		flex: 0 0 75%;
		max-width: 75%;
	}

	.col-tablet-10 {
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}

	.col-tablet-11 {
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}

	.col-tablet-12 {
		flex: 0 0 100%;
		max-width: 100%;
	}



}

/* Промежуточный десктоп (1200px - 1439px) */
@media (min-width: 1200px) and (max-width: 1439px) {
	.container {
		max-width: var(--intermediate-container);
		padding-right: calc(var(--intermediate-gutter) / 2);
		padding-left: calc(var(--intermediate-gutter) / 2);
	}

	.row {
		margin-right: calc(-1 * var(--intermediate-gutter) / 2);
		margin-left: calc(-1 * var(--intermediate-gutter) / 2);
	}

	[class*="col-"] {
		padding-right: calc(var(--intermediate-gutter) / 2);
		padding-left: calc(var(--intermediate-gutter) / 2);
	}

	/* Промежуточные колонки */
	.col-intermediate-1 {
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}

	.col-intermediate-2 {
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}

	.col-intermediate-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.col-intermediate-4 {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	.col-intermediate-5 {
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}

	.col-intermediate-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-intermediate-7 {
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}

	.col-intermediate-8 {
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

	.col-intermediate-9 {
		flex: 0 0 75%;
		max-width: 75%;
	}

	.col-intermediate-10 {
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}

	.col-intermediate-11 {
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}

	.col-intermediate-12 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* Стандартный десктоп (1440px - 1919px) */
@media (min-width: 1440px) and (max-width: 1919px) {
	.container {
		max-width: min(94vw, 1320px);
		padding-right: calc(var(--desktop-gutter) / 2);
		padding-left: calc(var(--desktop-gutter) / 2);
	}

	.row {
		margin-right: calc(-1 * var(--desktop-gutter) / 2);
		margin-left: calc(-1 * var(--desktop-gutter) / 2);
	}

	[class*="col-"] {
		padding-right: calc(var(--desktop-gutter) / 2);
		padding-left: calc(var(--desktop-gutter) / 2);
	}

	/* Десктопные колонки */
	.col-desktop-1 {
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}

	.col-desktop-2 {
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}

	.col-desktop-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.col-desktop-4 {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	.col-desktop-5 {
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}

	.col-desktop-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-desktop-7 {
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}

	.col-desktop-8 {
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

	.col-desktop-9 {
		flex: 0 0 75%;
		max-width: 75%;
	}

	.col-desktop-10 {
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}

	.col-desktop-11 {
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}

	.col-desktop-12 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* Большие экраны (1920px+) - фиксированная сетка по макету */
@media (min-width: 1920px) {
	.container {
		max-width: var(--desktop-container-max);
		/* Фиксированные 1312px */
		padding-right: 0;
		padding-left: 0;
	}

	.row {
		margin-right: calc(-1 * var(--desktop-gutter) / 2);
		margin-left: calc(-1 * var(--desktop-gutter) / 2);
	}

	[class*="col-"] {
		padding-right: calc(var(--desktop-gutter) / 2);
		padding-left: calc(var(--desktop-gutter) / 2);
	}

	/* Фиксированные колонки по макету */
	.col-1 {
		flex: 0 0 91px;
		max-width: 91px;
	}

	.col-2 {
		flex: 0 0 calc(91px * 2 + var(--desktop-gutter));
		max-width: calc(91px * 2 + var(--desktop-gutter));
	}

	.col-3 {
		flex: 0 0 calc(91px * 3 + var(--desktop-gutter) * 2);
		max-width: calc(91px * 3 + var(--desktop-gutter) * 2);
	}

	.col-4 {
		flex: 0 0 calc(91px * 4 + var(--desktop-gutter) * 3);
		max-width: calc(91px * 4 + var(--desktop-gutter) * 3);
	}

	.col-5 {
		flex: 0 0 calc(91px * 5 + var(--desktop-gutter) * 4);
		max-width: calc(91px * 5 + var(--desktop-gutter) * 4);
	}

	.col-6 {
		flex: 0 0 calc(91px * 6 + var(--desktop-gutter) * 5);
		max-width: calc(91px * 6 + var(--desktop-gutter) * 5);
	}

	.col-7 {
		flex: 0 0 calc(91px * 7 + var(--desktop-gutter) * 6);
		max-width: calc(91px * 7 + var(--desktop-gutter) * 6);
	}

	.col-8 {
		flex: 0 0 calc(91px * 8 + var(--desktop-gutter) * 7);
		max-width: calc(91px * 8 + var(--desktop-gutter) * 7);
	}

	.col-9 {
		flex: 0 0 calc(91px * 9 + var(--desktop-gutter) * 8);
		max-width: calc(91px * 9 + var(--desktop-gutter) * 8);
	}

	.col-10 {
		flex: 0 0 calc(91px * 10 + var(--desktop-gutter) * 9);
		max-width: calc(91px * 10 + var(--desktop-gutter) * 9);
	}

	.col-11 {
		flex: 0 0 calc(91px * 11 + var(--desktop-gutter) * 10);
		max-width: calc(91px * 11 + var(--desktop-gutter) * 10);
	}

	.col-12 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}


/* Offset классы */
.offset-1 {
	margin-left: 8.333333%;
}

.offset-2 {
	margin-left: 16.666667%;
}

.offset-3 {
	margin-left: 25%;
}

.offset-4 {
	margin-left: 33.333333%;
}

.offset-5 {
	margin-left: 41.666667%;
}

.offset-6 {
	margin-left: 50%;
}

.offset-7 {
	margin-left: 58.333333%;
}

.offset-8 {
	margin-left: 66.666667%;
}

.offset-9 {
	margin-left: 75%;
}

.offset-10 {
	margin-left: 83.333333%;
}

.offset-11 {
	margin-left: 91.666667%;
}

/* Утилиты отображения для всех брейкпоинтов */
.d-none {
	display: none !important;
}

.d-block {
	display: block !important;
}

.d-flex {
	display: flex;
}

.justify-content-between {
	justify-content: space-between;
}

.align-items-center {
	align-items: center;
}

/* Мобилка */
@media (max-width: 767px) {
	.d-mobile-none {
		display: none !important;
	}

	.d-mobile-block {
		display: block !important;
	}

	.d-mobile-flex {
		display: flex !important;
	}

	.offset-mobile-none {
		margin-left: 0;
	}
}

/* Планшет */
@media (min-width: 768px) and (max-width: 1199px) {
	.d-tablet-none {
		display: none !important;
	}

	.d-tablet-block {
		display: block !important;
	}

	.d-tablet-flex {
		display: flex !important;
	}

}

/* Промежуточный десктоп */
@media (min-width: 1200px) and (max-width: 1439px) {
	.d-intermediate-none {
		display: none !important;
	}

	.d-intermediate-block {
		display: block !important;
	}

	.d-intermediate-flex {
		display: flex !important;
	}
}

/* Стандартный десктоп */
@media (min-width: 1440px) and (max-width: 1919px) {
	.d-desktop-none {
		display: none !important;
	}

	.d-desktop-block {
		display: block !important;
	}

	.d-desktop-flex {
		display: flex !important;
	}
}

/* Большие экраны */
@media (min-width: 1920px) {
	.d-large-none {
		display: none !important;
	}

	.d-large-block {
		display: block !important;
	}

	.d-large-flex {
		display: flex !important;
	}
}