/* 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;}

@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;}
}



/* VARS */

.b-section[data-overlap] {--overlap: var(--s9);}
.b-section[data-overlap] + .b-section {--prev-overlap: var(--s9);}



/* OPTIONS */

.b-section[data-background="light-grey"] .b-background {background-color: var(--gray);}
.b-section[data-background="light-blue"] .b-background {background-color: var(--light-blue-300);}
.b-section[data-background="dark-blue"] .b-background {background-color: var(--med-blue-400);}

.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;}

.b-page .b-section[data-overlap^="+"]:not(:last-child) .b-frame {margin-bottom: calc(var(--overlap) * -1); padding-bottom: 0;}
.b-page .b-section[data-overlap^="+"] + .b-section {padding-top: var(--prev-overlap);}

.b-page .b-section[data-overlap^="-"]:not(:last-child) {padding-bottom: var(--overlap);}
.b-page .b-section[data-overlap^="-"] + .b-section > .b-background {top: var(--prev-overlap);}
.b-page .b-section[data-overlap^="-"] + .b-section .b-frame {margin-top: calc(var(--prev-overlap) * -1); padding-top: 0;}

@media screen and (max-width: 960px) {
	.b-section[data-overlap] {--overlap: var(--s7);}
	.b-section[data-overlap] + .b-section {--prev-overlap: var(--s7);}

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



/* MASK */

.b-page .b-section[data-mask="example"] {--mask-height: 256rem;}
.b-page .b-section[data-mask="example"] + .b-section {--prev-mask-height: 256rem;}
.b-page .b-section[data-mask="example"] .b-mask {mask: url('../../assets/images/mask-example.svg') no-repeat center bottom / 1920rem 19200rem;}

.b-page .b-section[data-mask="example-2"] {--mask-height: 64rem;}
.b-page .b-section[data-mask="example-2"] + .b-section {--prev-mask-height: 64rem;}
.b-page .b-section[data-mask="example-2"] .b-mask {mask: url('../../assets/images/mask-example-2.svg') no-repeat center bottom / 1920rem 19200rem;}

.b-page .b-section[data-mask]:not(:last-child) {
	padding-bottom: calc((var(--mask-height) / 2));
}

.b-page .b-section[data-mask] + .b-section {
	margin-top: calc(var(--prev-mask-height) * -1);
	padding-top: calc(var(--prev-mask-height) / 2);
}

.b-page .b-section[data-mask] .b-mask{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.b-page .b-section:last-child .b-mask {mask: none !important;}

/* overlap */

.b-page .b-section[data-mask][data-overlap^="+"] + .b-section {padding-top: calc(var(--prev-overlap) + (var(--prev-mask-height) / 2));}

.b-page .b-section[data-mask][data-overlap^="-"]:not(:last-child) {padding-bottom: calc(var(--overlap) + (var(--mask-height) / 2));}
.b-page .b-section[data-mask][data-overlap^="-"] + .b-section > .b-background  {top: 0;}

/* zindex adjustment */

.b-section[data-mask] .b-mask {z-index: 9;}
.b-section[data-mask] + .b-section[data-mask] .b-mask {z-index: 8;}
.b-section[data-mask] + .b-section[data-mask] + .b-section[data-mask] .b-mask {z-index: 7;}

.b-section[data-mask] + .b-section[data-mask] + .b-section[data-mask] +
 .b-section[data-mask] .b-mask {z-index: 6;}

.b-section[data-mask] + .b-section[data-mask] + .b-section[data-mask] +
 .b-section[data-mask] + .b-section[data-mask] .b-mask {z-index: 5;}

.b-section[data-mask] + .b-section[data-mask] + .b-section[data-mask] +
 .b-section[data-mask] + .b-section[data-mask] + .b-section[data-mask] .b-mask {z-index: 4;}

.b-section[data-mask] + .b-section[data-mask] + .b-section[data-mask] +
 .b-section[data-mask] + .b-section[data-mask] + .b-section[data-mask] +
  .b-section[data-mask] .b-mask {z-index: 3;}

.b-section[data-mask] + .b-section[data-mask] + .b-section[data-mask] +
 .b-section[data-mask] + .b-section[data-mask] + .b-section[data-mask] +
  .b-section[data-mask] + .b-section[data-mask] .b-mask {z-index: 2;}

.b-section[data-mask] + .b-section[data-mask] + .b-section[data-mask] +
 .b-section[data-mask] + .b-section[data-mask] + .b-section[data-mask] +
  .b-section[data-mask] + .b-section[data-mask] + .b-section[data-mask] .b-mask {z-index: 1;}

@media screen and (max-width: 960px) {
	.b-page .b-section[data-mask="example"] {--mask-height: 128rem;}
	.b-page .b-section[data-mask="example"] + .b-section {--prev-mask-height: 128rem;}
	.b-page .b-section[data-mask="example"] .b-mask{mask-size: 960rem 9600rem;}

	.b-page .b-section[data-mask="example-2"] {--mask-height: 32rem;}
	.b-page .b-section[data-mask="example-2"] + .b-section {--prev-mask-height: 32rem;}
	.b-page .b-section[data-mask="example-2"] .b-mask{mask-size: 960rem 9600rem;}
}



/* STICKY */

@media screen and (min-width: 961px) {
	.b-section[data-variant="sticky"] {position: sticky; top: -1rem; z-index: 11; transition: top 0.25s;}
	.b-page[data-scroll="up"] .b-section[data-variant="sticky"] {top: calc(var(--page-head-height-compressed) - 1rem);}
}



/* 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;}
}