/*!
 * 宝梅站点 Bootstrap 栅格子集（仅 container / row / col / 常用间距与对齐）
 * 替代全量 bootstrap.css（~200KB）
 */
:root {
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 0;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

.container {
	width: 100%;
	padding-right: calc(var(--bs-gutter-x) * 0.5);
	padding-left: calc(var(--bs-gutter-x) * 0.5);
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: 576px) {
	.container {
		max-width: 540px;
	}
}

@media (min-width: 768px) {
	.container {
		max-width: 720px;
	}
}

@media (min-width: 992px) {
	.container {
		max-width: 960px;
	}
}

@media (min-width: 1200px) {
	.container {
		max-width: 1140px;
	}
}

@media (min-width: 1400px) {
	.container {
		max-width: 1320px;
	}
}

.row {
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 0;
	display: flex;
	flex-wrap: wrap;
	margin-top: calc(-1 * var(--bs-gutter-y));
	margin-right: calc(-0.5 * var(--bs-gutter-x));
	margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.row > * {
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	padding-right: calc(var(--bs-gutter-x) * 0.5);
	padding-left: calc(var(--bs-gutter-x) * 0.5);
	margin-top: var(--bs-gutter-y);
}

.col {
	flex: 1 0 0;
}

.col-auto {
	flex: 0 0 auto;
	width: auto;
}

.col-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

.g-3,
.gx-3 { --bs-gutter-x: 1rem; }
.g-3,
.gy-3 { --bs-gutter-y: 1rem; }
.g-4,
.gx-4 { --bs-gutter-x: 1.5rem; }
.g-4,
.gy-4 { --bs-gutter-y: 1.5rem; }
.g-5,
.gx-5 { --bs-gutter-x: 3rem; }
.g-5,
.gy-5 { --bs-gutter-y: 3rem; }

.m-0 { margin: 0 !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-5 { margin-bottom: 3rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

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

.text-center { text-align: center !important; }

.align-self-center { align-self: center !important; }
.align-items-center { align-items: center !important; }
.align-items-stretch { align-items: stretch !important; }
.justify-content-center { justify-content: center !important; }

@media (min-width: 576px) {
	.col-sm-6 { flex: 0 0 auto; width: 50%; }
}

@media (min-width: 768px) {
	.col-md-1 { flex: 0 0 auto; width: 8.33333333%; }
	.col-md-3 { flex: 0 0 auto; width: 25%; }
	.col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
	.col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
	.col-md-6 { flex: 0 0 auto; width: 50%; }
	.col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
	.col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
}

@media (min-width: 992px) {
	.col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }
	.col-lg-3 { flex: 0 0 auto; width: 25%; }
	.col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
	.col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
	.col-lg-6 { flex: 0 0 auto; width: 50%; }
	.col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
	.col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
	.col-lg-9 { flex: 0 0 auto; width: 75%; }
	.g-lg-5,
	.gx-lg-5 { --bs-gutter-x: 3rem; }
	.g-lg-5,
	.gy-lg-5 { --bs-gutter-y: 3rem; }
	.order-lg-1 { order: 1 !important; }
	.order-lg-2 { order: 2 !important; }
	.ms-lg-2 { margin-left: 0.5rem !important; }
	.pe-lg-5 { padding-right: 3rem !important; }
	.px-lg-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
	.text-lg-end { text-align: right !important; }
	.mt-lg-0 { margin-top: 0 !important; }
}

@media (min-width: 1200px) {
	.col-xl-4 { flex: 0 0 auto; width: 33.33333333%; }
}
