/* ==========================================================
   BAHAMON.DEV — CONTAINERS
   Global container and section infrastructure
   ========================================================== */


/* ==========================================================
   01. CONTAINERS
   ========================================================== */

.container-i,
.container-ii,
.container-iii {
	width: 100%;
	margin-inline: auto;
}
body .l-subheader-h{
	max-width:100%;
}
body .l-subheader {
    padding: 0;
    --padding-inline: 0;
}

/* ==========================================================
   02. SECTION
   ========================================================== */

.section-i {
	width: 100%;

	padding-top: var(--space-section);
	padding-bottom: var(--space-section);
}


/* ==========================================================
   03. FULL WIDTH
   ========================================================== */

.full-i {
	width: 100%;
}


/* ==========================================================
   04. VIEWPORT
   ========================================================== */

.viewport-i {
	width: 100%;
	min-height: 100svh;
}


/* ==========================================================
   05. RESPONSIVE CONTAINERS
   ========================================================== */


/* ----------------------------------------------------------
   XXL — 1600px ↑
   ---------------------------------------------------------- */

@media (min-width: 1600px) {
	.g-cols.via_grid>.vc_column_container.container-i,
	body .l-subheader-h,
	.container-i {
		width: 70vw;
	}

	.container-ii {
		width: 60vw;
	}

	.container-iii {
		width: 50vw;
	}

}


/* ----------------------------------------------------------
   XL — 1200px → 1599px
   ---------------------------------------------------------- */

@media (min-width: 1200px) and (max-width: 1599px) {

	.g-cols.via_grid>.vc_column_container.container-i,
	body .l-subheader-h,
	.container-i {
		width: 90vw;
	}

	.container-ii {
		width: 80vw;
	}

	.container-iii {
		width: 70vw;
	}

}


/* ----------------------------------------------------------
   LG — 992px → 1199px
   ---------------------------------------------------------- */

@media (min-width: 992px) and (max-width: 1199px) {

	.g-cols.via_grid>.vc_column_container.container-i,
	body .l-subheader-h,
	.container-i {
		width: 96vw;
	}

	.container-ii {
		width: 86vw;
	}

	.container-iii {
		width: 76vw;
	}

}


/* ----------------------------------------------------------
   MD — 768px → 991px
   ---------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 991px) {

	.g-cols.via_grid>.vc_column_container.container-i,
	body .l-subheader-h,
	.container-i {
		width: 96vw;
	}

	.container-ii {
		width: 88vw;
	}

	.container-iii {
		width: 80vw;
	}

}


/* ----------------------------------------------------------
   SM — 576px → 767px
   ---------------------------------------------------------- */

@media (min-width: 576px) and (max-width: 767px) {

	.g-cols.via_grid>.vc_column_container.container-i,
	body .l-subheader-h,
	.container-i {
		width: 96vw;
	}

	.container-ii {
		width: 90vw;
	}

	.container-iii {
		width: 84vw;
	}

}


/* ----------------------------------------------------------
   XS — 340px → 575px
   ---------------------------------------------------------- */

@media (min-width: 340px) and (max-width: 575px) {

	.g-cols.via_grid>.vc_column_container.container-i,
	body .l-subheader-h,
	.container-i {
		width: 96vw;
	}

	.container-ii {
		width: 92vw;
	}

	.container-iii {
		width: 88vw;
	}

}


/* ----------------------------------------------------------
   XXS — 339px ↓
   ---------------------------------------------------------- */

@media (max-width: 339px) {

	.g-cols.via_grid>.vc_column_container.container-i,
	body .l-subheader-h,
	.container-i {
		width: 96vw;
	}

	.container-ii {
		width: 92vw;
	}

	.container-iii {
		width: 88vw;
	}

}