/*-------------------------------------------------------*/
/* Containers and sections
/*-------------------------------------------------------*/
@include bp-xl-up {
	.envisionx-container,
	.envisionx-header__container {
		max-width: var(--ebx-container-width);
	}
}

.envisionx-container,
.envisionx-header__container {
	padding-left: 20px;
	padding-right: 20px;
	margin-inline-start: auto;
	margin-inline-end: auto;
	width: 100%;
}

.envisionx-main-wrapper {
	position: relative;
}

.envisionx-blog-content,
.envisionx-page-content {
	display: flex;
	flex-wrap: wrap;
	padding: 32px 0;

	@include bp-lg-up {
		flex-wrap: nowrap;
	}
}

.envisionx-content {
	width: 100%;
	-webkit-box-flex: 1;
	-ms-flex: 1 0 0%;
	flex: 1 0 0%;
	padding-left: 20px;
	padding-right: 20px;
	margin-bottom: 32px;
}

.envisionx-shop-content {
	padding: 32px 0;
}

.envisionx-blog-content .envisionx-grid-item {
	margin-bottom: 40px;
}

.envisionx-no-content {
	padding-top: 64px;
	padding-bottom: 64px;
}

.envisionx-no-content__container {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

/* Grid
/*-------------------------------------------------------*/
.envisionx-row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -20px;
	margin-right: -20px;
}

.envisionx-grid {
	& > * {
		padding: 0 20px;
		flex: 0 0 100%;
		width: 100%;
	}

	@include bp-md-up {
		& > * {
			flex: 0 0 50%;
			width: 50%;
		}
	}

	@include bp-lg-up {
		&-1 > * {
			flex: 0 0 100%;
			width: 100%;
		}

		&-2 > * {
			flex: 0 0 50%;
			width: 50%;
		}

		&-3 > * {
			flex: 0 0 33.333%;
			width: 33.333%;
		}

		&-4 > * {
			flex: 0 0 25%;
			width: 25%;
		}

		&-5 > * {
			flex: 0 0 20%;
			width: 20%;
		}
	}
}

@include bp-lg-up {
	.envisionx-col-lg-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}
	.envisionx-col-lg-4 {
		flex: 0 0 33.333%;
		max-width: 33.333%;
	}
	.envisionx-col-lg-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

.envisionx-row--10 {
	margin-left: -10px;
	margin-right: -10px;

	.envisionx-grid-item {
		padding: 0 10px;
	}
}

/* Sidebar
/*-------------------------------------------------------*/
.envisionx-sidebar {
	width: 100%;
	padding: 0 20px;

	@include bp-lg-up {
		max-width: 340px;
		flex: 0 0 340px;
	}
}

@include bp-lg-up {
	.envisionx-left-sidebar {
		.envisionx-content {
			order: 2;
		}

		.envisionx-content {
			padding-left: 50px;
		}
	}

	.envisionx-right-sidebar {
		.envisionx-content {
			padding-right: 50px;
		}
	}
}