.background-with-blocks{position:relative;padding-left:0;padding-right:0;}
.background-with-blocks + .background-with-blocks:not(.type-identical-to-before):not(.type-radius-under) { margin-top:calc(var(--block-spacing-medium) * -1); }
.background-with-blocks + .background-with-blocks.type-identical-to-before,
.background-with-blocks + .background-with-blocks.type-radius-under { margin-top: 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);
}

/* Meant to be paired with the NEXT background-with-blocks block set to type-radius-top-over -
   removes this block's own bottom spacing AND that following block's own top spacing, so its
   rounded top corners sit completely flush against this one with zero gap between them, instead
   of floating below a plain margin/padding-sized strip of page background. No radius/mask of its
   own; the rounding comes entirely from the block after it. */
.background-with-blocks.type-radius-none{margin-bottom:0;}
.background-with-blocks.type-radius-none + .background-with-blocks.type-radius-top-over{margin-top:0;}
.background-with-blocks.type-radius-none:not(.background-bottom-half) > .background-wrapper{
	z-index:0;
	bottom:calc(var(--border-radius-big) * -1);
}

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