/* SECTION */

.b-section {
	position: relative;
}

.b-frame {
	position: relative;
	max-width: var(--frame-width);
	margin: 0 auto;
	padding: var(--s9) var(--s5);
}

.b-background {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	background-color: var(--white);
	pointer-events: none;
}

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

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

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

.b-page .b-frame {z-index: 10;}
.b-page .b-section.alt-post-footer .b-frame {z-index: 9; margin-top: -1px;}

/* misc */

.b-section[data-misc~="rounded"] .b-background {border-radius: var(--s4);}

.b-page-body > .b-section[data-misc~="inset"] .b-background {left: var(--s5); right: var(--s5);}
.b-page-body > .b-section[data-misc~="inset"]:first-child .b-background {top: var(--s5);}
.b-page-body > .b-section[data-misc~="inset"]:last-child .b-background {bottom: var(--s5);}

@media screen and (min-width: 961px) {
	.b-page-body > .b-section[data-misc~="rounded"]:not([data-misc~="inset"]):last-child .b-background {
		bottom: var(--ns5);
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	.b-page-body > .b-section[data-misc~="rounded"]:not([data-misc~="inset"]):last-child .b-background::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: var(--s5);
		background: var(--dark-blue-gradient);
	}
}

@media screen and (max-width: 1440px) {
	.b-page-body > .b-section[data-misc~="inset"] .b-background {left: var(--s1); right: var(--s1);}
	.b-page-body > .b-section[data-misc~="inset"]:first-child .b-background {top: var(--s1);}
	.b-page-body > .b-section[data-misc~="inset"]:last-child .b-background {bottom: var(--s1);}
}

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

	.b-section[data-misc~="rounded"] .b-background {border-radius: 0;}
	.b-page-body > .b-section[data-misc~="inset"] .b-background {left: 0; right: 0;}
	.b-page-body > .b-section[data-misc~="inset"]:first-child .b-background {top: 0;}
	.b-page-body > .b-section[data-misc~="inset"]:last-child .b-background {bottom: 0;}
}



/* OPTIONS */

.b-section[data-background="white"] .b-background {background-color: var(--white);}
.b-section[data-background="black"] .b-background {background-color: var(--black);}
.b-section[data-background="blue"] .b-background {background-color: var(--blue-500);}
.b-section[data-background="light-blue"] .b-background {background-color: var(--blue-50);}
.b-section[data-background="diagonal-blue-gradient"] .b-background {background: var(--diagonal-blue-gradient);}
.b-section[data-background="diagonal-blue-teal-gradient"] .b-background {background: var(--diagonal-blue-teal-gradient);}
.b-section[data-background="diagonal-blue-purple-gradient"] .b-background {background: var(--diagonal-blue-purple-gradient);}
.b-section[data-background="diagonal-blue-pink-gradient"] .b-background {background: var(--diagonal-blue-pink-gradient);}
.b-section[data-background="light-blue-gradient"] .b-background {background: var(--light-blue-gradient);}
.b-section[data-background="light-blue-purple-gradient"] .b-background {background: var(--light-blue-purple-gradient);}
.b-section[data-background="light-blue-pink-gradient"] .b-background {background: var(--light-blue-pink-gradient);}

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

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

.b-section[data-top="medium"] .b-frame {padding-top: var(--s7);}
.b-section[data-top="small"] .b-frame {padding-top: var(--s5);}
.b-section[data-top="none"] .b-frame {padding-top: 0;}

.b-section[data-bottom="medium"] .b-frame {padding-bottom: var(--s7);}
.b-section[data-bottom="small"] .b-frame {padding-bottom: var(--s5);}
.b-section[data-bottom="none"] .b-frame {padding-bottom: 0;}

@media screen and (max-width: 960px) {
	.b-section[data-top="medium"] .b-frame {padding-top: var(--s5);}
	.b-section[data-bottom="medium"] .b-frame {padding-bottom: var(--s5);}
}


/* MODAL */

.b-modal .b-section .b-frame {padding: var(--s9);}
.b-modal .b-section[data-top="medium"] .b-frame {padding: var(--s7);}
.b-modal .b-section[data-top="small"] .b-frame {padding: var(--s5);}
.b-modal .b-section[data-top="none"] .b-frame {padding: 0 !important;}

@media screen and (max-width: 960px) {
	.b-modal .b-section .b-frame,
	.b-modal .b-section[data-top="medium"] .b-frame,
	.b-modal .b-section[data-top="small"] .b-frame {padding: var(--s3) !important;}
}