.background-with-blocks{position:relative;padding-left:0;padding-right:0;}

.background-with-blocks.type-identical-to-before{margin-top:calc(var(--block-spacing-small) * -2);}

.background-with-blocks.background-top-half{padding-bottom:0;}
.background-with-blocks.background-top-half > .background-wrapper{bottom:calc(50% - (var(--block-spacing-small) / 2));}

.background-with-blocks.background-bottom-half{padding-top:0;}
.background-with-blocks.background-bottom-half > .background-wrapper{top:calc(50% - (var(--block-spacing-small) / 2));}

.background-with-blocks.block-margin-small + footer.footer { margin-top: calc(var(--block-spacing-small) * -1); }
.background-with-blocks.block-margin-regular + footer.footer { margin-top: calc(var(--block-spacing-regular) * -1); }
.background-with-blocks.block-margin-medium + footer.footer { margin-top: calc(var(--block-spacing-medium) * -1); }

/* "Behind Radius Backgrounds" - the background bleeds past the block's own top/bottom edge, then the
   page background color masks over those edges with a rounded corner, so the block reads as rounded
   without actually clipping the background image/color itself. */
.background-with-blocks.type-radius-under > .background-wrapper{
	z-index:0;
	top:calc(var(--border-radius-big) * -1);
	bottom:calc(var(--border-radius-big) * -1);
}
.background-with-blocks.type-radius-under > .background-wrapper::before,
.background-with-blocks.type-radius-under > .background-wrapper::after{
	content:"";
	z-index:5;
	position:absolute;
	left:0;
	right:0;
	background-color:var(--light-bg);
	height:var(--border-radius-big);
}
.background-with-blocks.type-radius-under > .background-wrapper::before{
	top:0;
	border-bottom-left-radius:var(--border-radius-big);
	border-bottom-right-radius:var(--border-radius-big);
}
.background-with-blocks.type-radius-under > .background-wrapper::after{
	bottom:0;
	border-top-left-radius:var(--border-radius-big);
	border-top-right-radius:var(--border-radius-big);
}

/* Same as radius-under, but only masks the top edge - the bottom is left to butt straight up
   against another (differently colored) background-with-blocks block below it. */
.background-with-blocks.type-radius-under-alt:not(.background-bottom-half) > .background-wrapper{
	z-index:0;
	top:calc(var(--border-radius-big) * -1);
	bottom:calc(var(--border-radius-big) * -1);
}
.background-with-blocks.type-radius-under-alt.background-bottom-half > .background-wrapper{
	margin-top:calc(var(--border-radius-big) / -2);
}
.background-with-blocks.type-radius-under-alt > .background-wrapper::before{
	content:"";
	z-index:1;
	position:absolute;
	top:0;
	left:0;
	right:0;
	background-color:var(--light-bg);
	height:var(--border-radius-big);
	border-bottom-left-radius:var(--border-radius-big);
	border-bottom-right-radius:var(--border-radius-big);
}

/* Not covered by the reference SCSS you gave me - read literally as "Radius Backgrounds" (over),
   i.e. a normal visible rounded card, as opposed to the masking-illusion techniques above. Flag if
   that's not what you meant. */
/* .background-with-blocks.type-radius-over{padding-left:20px;padding-right:20px;} */
.background-with-blocks.type-radius-over > .background-wrapper{border-radius:var(--border-radius-big);overflow:hidden;}

/* Same idea as radius-over, but only rounds the top corners - bottom stays square to sit flush
   against whatever follows it. */
.background-with-blocks.type-radius-top-over > .background-wrapper{
	border-top-left-radius:var(--border-radius-big);
	border-top-right-radius:var(--border-radius-big);
	overflow:hidden;
}

/* Same idea as radius-over, but only rounds the bottom corners - top stays square to sit flush
   against whatever precedes it. */
.background-with-blocks.type-radius-bottom-over > .background-wrapper{
	border-bottom-left-radius:var(--border-radius-big);
	border-bottom-right-radius:var(--border-radius-big);
	overflow:hidden;
}

.background-with-blocks > .background-wrapper{
	position:absolute;
	inset:0;
	pointer-events:none;
}
.background-with-blocks > .background-wrapper .section-background{
	position:relative;
	width:100%;
	height:100%;
	overflow:hidden;
	opacity:var(--background-opacity);
}
.background-with-blocks > .background-wrapper .background-image{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	overflow:hidden;
	opacity:var(--background-image-opacity);
}
.background-with-blocks > .background-wrapper .background-image picture{display:block;width:100%;height:100%;}
.background-with-blocks > .background-wrapper .background-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}

.background-with-blocks > .blocks-wrapper{position:relative;}
.background-with-blocks > .blocks-wrapper.text-body-alt{color:var(--light-font-color2);}
.background-with-blocks > .blocks-wrapper.text-white{color:var(--light-font-color);}
.background-with-blocks > .blocks-wrapper.text-primary{color:var(--main-clr);}
.background-with-blocks > .blocks-wrapper.text-secondary{color:var(--head-font-color);}

.background-with-blocks > .blocks-wrapper > section:first-child{margin-top:0 !important; padding-top:0 !important;}
.background-with-blocks > .blocks-wrapper > section:last-child{margin-bottom:0 !important; padding-bottom:0 !important;}

@media(max-width:767.98px){
	.background-with-blocks > .blocks-wrapper br{display:none;}
}