.text-white > .scrollBoxes .scrollBoxesHeadText .scrollBoxesSmall,
.text-white > .scrollBoxes .scrollBoxesHeadText h2,
.text-white > .scrollBoxes .scrollBoxesHint { color:var(--light-font-color); }

.text-body-alt > .scrollBoxes .scrollBoxesHeadText .scrollBoxesSmall,
.text-body-alt > .scrollBoxes .scrollBoxesHeadText h2,
.text-body-alt > .scrollBoxes .scrollBoxesHint { color:var(--light-font-color2); }

.text-primary > .scrollBoxes .scrollBoxesHeadText .scrollBoxesSmall,
.text-primary > .scrollBoxes .scrollBoxesHeadText h2,
.text-primary > .scrollBoxes .scrollBoxesHint { color:var(--main-clr); }

.text-secondary > .scrollBoxes .scrollBoxesHeadText .scrollBoxesSmall,
.text-secondary > .scrollBoxes .scrollBoxesHeadText h2,
.text-secondary > .scrollBoxes .scrollBoxesHint { color:var(--head-font-color); }

.scrollBoxesWrap{position:relative;}
/* .scrollBoxesPin{height:100vh;} */
.scrollBoxesPin{position:sticky;top:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden;}

/* Offset where the pin sticks TO, matching .stepBoxesPin - so the label settles in below the
   sticky site header instead of being pinned directly underneath it. */
@media(min-width:1200px){ .scrollBoxesPin{top:calc(var(--headerHeight) + 20px);} }

.scrollBoxesHead{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:60px;}
.scrollBoxesSmall{display:block;color:var(--black-clr);opacity:.4;font-size:18px;font-weight:600;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:15px;}
.scrollBoxesHeadText h2{color:var(--head-font-color);font-weight:700;font-size:var(--fs-28);}

.scrollBoxesHint{display:flex;align-items:center;gap:10px;color:var(--black-clr);opacity:.6;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;white-space:nowrap;}

.scrollBoxesTrack{display:flex;gap:30px;will-change:transform;}

.scrollBoxSpacer{flex:0 0 auto;}

.scrollBox{
	--scrollbox-width: calc(540px / 24 * 7);
	box-sizing:border-box;
	position:relative;flex:0 0 auto;
	width:var(--scrollbox-width);
	min-height:calc(var(--scrollbox-width) * 510 / 440);
	background:var(--black-clr);border-radius:30px;padding:30px;display:flex;flex-direction:column;justify-content:space-between;
}
.scrollBox:before{content:"";position:absolute;inset:0;background:rgba(255,255,255,0.1);border-radius:30px;}

.scrollBoxNumber{position:relative;display:block;font-size:64px;font-weight:800;color:rgba(255,255,255,.08);line-height:1;text-align:right;}

.scrollBoxContent{position:relative;}
.scrollBoxContent h3{color:var(--light-font-color);font-weight:600;font-size:var(--fs-24);}
.scrollBoxContent h3:not(:last-child){padding-bottom:10px;}
.scrollBoxContent p{color:var(--light-font-color);opacity:.75;font-size:15px;}
.scrollBoxContent p:last-child{padding-bottom:0;}

.scrollBoxLink{position:relative;display:inline-flex;align-items:center;gap:8px;color:var(--tertiary-color);font-weight:600;margin-top:10px;}
.scrollBoxLink i{font-size:12px;}

@media(min-width:576px){ .scrollBox{ --scrollbox-width: calc(540px / 24 * 20); } .scrollBoxContent h3 {font-size:var(--fs-26);} }
@media(min-width:768px){ .scrollBox{ --scrollbox-width: calc(720px / 24 * 16); } .scrollBoxesHeadText h2{font-size:var(--fs-36);} }
@media(min-width:992px){ .scrollBox{ --scrollbox-width: calc(960px / 24 * 12); } .scrollBoxesHeadText h2{font-size:var(--fs-42);} .scrollBoxContent h3 {font-size:var(--fs-28);}}
@media(min-width:1200px){ .scrollBox{ --scrollbox-width: calc(1140px / 24 * 9); } }
@media(min-width:1400px){ .scrollBox{ --scrollbox-width: calc(1320px / 24 * 8); } }
@media(min-width:1600px){ .scrollBox{ --scrollbox-width: calc(1450px / 24 * 7); } .scrollBoxesHeadText h2{font-size:var(--fs-48);} .scrollBoxContent h3 {font-size:var(--fs-30);} }

@media(max-width:767.98px){
	.scrollBoxes br {display: none;}
	.scrollBoxesPin{position:relative;top:auto;height:auto;padding:40px 0;}
	.scrollBoxesHead{margin-bottom:30px;}
	.scrollBoxesTrack{
		--scrollbox-mobile-width:80vw;
		transform:none !important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
		padding:0 calc((100vw - var(--scrollbox-mobile-width)) / 2);
	}
	.scrollBox{scroll-snap-align:center;width:var(--scrollbox-mobile-width);}
	.scrollBoxSpacer{display:none;}
}