/* 12-ти колоночная сетка */
.row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 10px 10px 10px;
}

[class^="col-"] {
	padding: 10px; /* Внутренний отступ */
	box-sizing: border-box; /* Учитываем padding в ширине */
}

.col-1 {
	flex: 0 0 calc(100% / 12); /* 1 колонка из 12 */
}

.col-2 {
	flex: 0 0 calc(100% / 6); /* 2 колонки из 12 */
}

.col-3 {
	flex: 0 0 calc(100% / 4); /* 3 колонки из 12 */
}

.col-4 {
	flex: 0 0 calc(100% / 3); /* 4 колонки из 12 */
}

.col-5 {
	flex: 0 0 calc(100% / 12 * 5); /* 5 колонок из 12 */
}

.col-6 {
	flex: 0 0 50%; /* 6 колонок из 12 */
}

.col-7 {
	flex: 0 0 calc(100% / 12 * 7); /* 7 колонок из 12 */
}

.col-8 {
	flex: 0 0 calc(100% / 12 * 8); /* 8 колонок из 12 */
}

.col-9 {
	flex: 0 0 calc(100% / 12 * 9); /* 9 колонок из 12 */
}

.col-10 {
	flex: 0 0 calc(100% / 12 * 10); /* 10 колонок из 12 */
}

.col-11 {
	flex: 0 0 calc(100% / 12 * 11); /* 11 колонок из 12 */
}

.col-12 {
	flex: 0 0 100%; /* 12 колонок из 12 */
}

@media (max-width: 768px) {
	.col-1,
	.col-2,
	.col-3,
	.col-4,
	.col-5,
	.col-6,
	.col-7,
	.col-8,
	.col-9,
	.col-10,
	.col-11,
	.col-12 {
		flex: 0 0 99%;
	}
}
.m-0 {
	margin: 0;
}

.m-1 {
	margin: 1rem 0;
}
.m-2 {
	margin: 2rem 0;
}

.mb-1 {
	margin: 0 0 1rem 0;
}
.mb-2 {
	margin: 0 0 2rem 0;
}

.mt-1 {
	margin: 1rem 0 0 0;
}
.mt-2 {
	margin: 2rem 0 0 0;
}