.ion-grid {
	display: flex;

	for num in (1...11) {
		.ion-col-{num} {
			flex: num;
			margin: $main-padding;
			padding: $main-padding 0 $main-padding 0;
		}
	}
}

.ion-container {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: container.width;
	padding-left: $main-padding;
	padding-right: $main-padding;
}

/* For small screen sizes */
@media (max-width: container.width) {
	.ion-grid {
		flex-direction: column;
	}

	.ion-container {
		width: 100%;
	}

	for num in (1...11) {
		.ion-grid .ion-col-{num} {
			margin: $main-padding 0;
		}
	}
}

.ion-grid {
	display: flex;

	for num in (1...11) {
		.ion-col-{num} {
			flex: num;
			margin: $main-padding;
			padding: $main-padding 0 $main-padding 0;
		}
	}
}

.ion-container {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: container.width;
	padding-left: $main-padding;
	padding-right: $main-padding;
}

/* For small screen sizes */
@media (max-width: container.width-sm) {
	.ion-grid {
		flex-direction: column;
	}

	.ion-container {
		width: 100%;
	}

	for num in (1...11) {
		.ion-grid .ion-col-{num} {
			margin: $main-padding 0;
		}
	}
}

Use width-sm variable for @media rule
Use width-sm variable for @media rule
