/* CONTAINER */

.b-container {
	margin: 0 auto;
	position: relative;
}

.b-container-frame {
	position: relative;
	padding: var(--s7) var(--s8);
}

.b-container-background {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100%;
	transform: translate(-50%, 0);
	overflow: hidden;
	background-color: transparent;
	pointer-events: none;
}

.b-container-background .b-img {
	position: absolute !important;
	top: 0;
	left: 50%;
	max-width: none;
	transform: translate(-50%, 0);
}

.b-container-background .b-img img {
	width: 100%;
	height: 100%;
}

.b-container-background .b-img:nth-child(1) {display: block;}
.b-container-background .b-img:nth-child(2) {display: none;}

.b-container[data-width="10"] {max-width: var(--col-10);}
.b-container[data-width="8"] {max-width: var(--col-8);}
.b-container[data-width="6"] {max-width: var(--col-6);}

.b-container[data-misc="2"] {margin-left: 0;}


@media screen and (max-width: 960px) {
	.b-container-frame {padding: var(--s5);}
	.b-container-background .b-img:nth-child(1) {display: none;}
	.b-container-background .b-img:nth-child(2) {display: block;}
}


@media screen and (min-width: 961px) {
	.b-container[data-variant="1"] {
		margin: 0 var(--ns7);
		padding: 0;
	}

	.b-container[data-variant="2"] {
		margin: 0 var(--s7);
		padding: 0;
	}
}






/* OPTIONS */

.b-container[data-background="1"] > .b-container-background {background-color: var(--deep-indigo); border-radius: var(--s3)}
.b-container[data-background="2"] > .b-container-background {background-color: var(--mint); border-radius: var(--s3)}
.b-container[data-background="3"] > .b-container-background {background-color: var(--melrose); border-radius: var(--s3)}
.b-container[data-background="4"] > .b-container-background {background-color: var(--gray-100); border-radius: var(--s3)}
.b-container[data-background="5"] > .b-container-background {background-color: var(--white); border-radius: var(--s3)}
.b-container[data-background="6"] > .b-container-background {background-color: var(--yellow); border-radius: var(--s3)}

.b-container[data-bg-alignment="2"] > .b-container-background .b-img:nth-child(1) {top: 50%; transform: translate(-50%, -50%);}
.b-container[data-bg-alignment-mobile="2"] > .b-container-background .b-img:nth-child(2) {top: 50%; transform: translate(-50%, -50%);}

.b-container[data-bg-alignment="3"] > .b-container-background .b-img:nth-child(1) {top: auto; bottom: 0;}
.b-container[data-bg-alignment-mobile="3"] > .b-container-background .b-img:nth-child(2) {top: auto; bottom: 0; transform: translate(-50%, 0);}

.b-container[data-padding="1"] > .b-container-frame {padding: 0;}
.b-container[data-padding="3"] > .b-container-frame {padding: var(--s7);}
.b-container[data-padding="4"] > .b-container-frame {padding: var(--s5);}
.b-container[data-padding="5"] > .b-container-frame {padding: var(--s3);}

.b-container.alt-no-top > .b-container-frame {padding-top: 0;}

@media screen and (max-width: 960px) {
	.b-container[data-padding="3"] > .b-container-frame {padding: var(--s4);}
	.b-container[data-padding="4"] > .b-container-frame {padding: var(--s4);}
}



/* CUSTOM LAYOUT */ 


.b-container[data-layout] > .b-container-frame > .acf-innerblocks-container,
.b-page .b-container[data-layout] > .b-container-frame {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	flex-wrap: wrap;
	box-sizing: border-box;
}

.b-container[data-layout] .b-container {margin: 0;}
.b-container[data-layout] > .b-container-frame > .acf-innerblocks-container > *:nth-child(n+3) {opacity: 0.25;}
.b-page .b-container[data-layout] > .b-container-frame > *:nth-child(n+3) {display: none;}

.b-container[data-layout="1"] > .b-container-frame {
	--container-width-left: calc(25% - 24rem);
	--container-width-right: calc(75% - 8rem);
}

.b-container[data-layout="2"] > .b-container-frame {
	--container-width-left: calc(50% - var(--s3));
	--container-width-right: calc(50% - var(--s3));
}

.b-container[data-layout="3"] > .b-container-frame {
	--container-width-left: calc(40% - var(--s3));
	--container-width-right: calc(60% - var(--s3));
}

.b-container[data-layout="4"] > .b-container-frame {
	--container-width-left: calc(50% - var(--s3));
	--container-width-right: calc(41% - var(--s3));
}

.b-container[data-layout="5"] > .b-container-frame {
	--container-width-left: calc(80% - var(--s3));
	--container-width-right: calc(20% - var(--s3));
}

@media screen and (min-width: 961px) {
	.b-container[data-layout] > .b-container-frame > .acf-innerblocks-container > .acf-block-component:nth-child(1),
	.b-page .b-container[data-layout] > .b-container-frame > *:nth-child(1) {width: var(--container-width-left);}

	.b-container[data-layout] > .b-container-frame > .acf-innerblocks-container > .acf-block-component:nth-child(2),
	.b-page .b-container[data-layout] > .b-container-frame > *:nth-child(2) {width: var(--container-width-right);}

	/* layout options */

	.b-container[data-layout-options~="center-vertically"] > .b-container-frame > .acf-innerblocks-container,
	.b-page .b-container[data-layout-options~="center-vertically"] > .b-container-frame {align-items: center;}

	.b-container[data-layout-options~="left-offset"] > .b-container-frame > .acf-innerblocks-container > .acf-block-component:nth-child(1),
	.b-page .b-container[data-layout-options~="left-offset"] > .b-container-frame > *:nth-child(1) {width: calc(var(--container-width-left) - var(--col-gutter));}

	.b-container[data-layout-options~="right-offset"] > .b-container-frame > .acf-innerblocks-container > .acf-block-component:nth-child(2),
	.b-page .b-container[data-layout-options~="right-offset"] > .b-container-frame > *:nth-child(2) {width: calc(var(--container-width-right) - var(--col-gutter));}

	.b-container.alt-negative-offset {margin-top: var(--ns10);}
}

@media screen and (max-width: 960px) {
	.b-container[data-layout] > .b-container-frame > .acf-innerblocks-container,
	.b-page .b-container[data-layout] > .b-container-frame {flex-direction: column; gap: var(--s5) 0;}

	.b-container[data-layout] > .b-container-frame > .acf-innerblocks-container,
	.b-page .b-container[data-layout] > .b-container-frame > * {width: 100%;}

	.b-container[data-layout-options~="reverse-mobile"] > .b-container-frame > .acf-innerblocks-container,
	.b-page .b-container[data-layout-options~="reverse-mobile"] > .b-container-frame {flex-direction: column-reverse;}
}