.text-white > .imageContent .imageContentBody .imageContentSmall,
.text-white > .imageContent .imageContentBody h2,
.text-white > .imageContent .imageContentBody p { color:var(--light-font-color); }

.text-body-alt > .imageContent .imageContentBody .imageContentSmall,
.text-body-alt > .imageContent .imageContentBody h2,
.text-body-alt > .imageContent .imageContentBody p { color:var(--light-font-color2); }

.text-primary > .imageContent .imageContentBody .imageContentSmall,
.text-primary > .imageContent .imageContentBody h2,
.text-primary > .imageContent .imageContentBody p { color:var(--main-clr); }

.text-secondary > .imageContent .imageContentBody .imageContentSmall,
.text-secondary > .imageContent .imageContentBody h2,
.text-secondary > .imageContent .imageContentBody p { color:var(--head-font-color); }

.imageContentRow{--bs-gutter-x:60px;row-gap:30px;}

.imageContentMedia{border-radius:30px;overflow:hidden;}
.imageContentMedia picture{display:block;}
.imageContentMedia img{display:block;width:100%;height:auto;}

.imageContentSmall{display:block;color:var(--black-clr);opacity:.4;font-size:18px;font-weight:600;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:15px;}

.imageContentBody h2{color:var(--head-font-color);font-weight:400;font-size:var(--fs-30);}
.imageContentBody h2 b, .imageContentBody h2 strong { font-weight:600; }
.imageContentBody h2:not(:last-child){padding-bottom:20px;}
.imageContentBody p{color:var(--body-font-color);opacity:.85;font-size:16px;}
.imageContentBody p:last-child{padding-bottom:0;}

.imageContentBody.left-align,
.imageContentBody.left-align p{text-align:left;}

.imageContentBody.center-align,
.imageContentBody.center-align p{text-align:center;}

.imageContentBody.right-align,
.imageContentBody.right-align p{text-align:right;}

/* Same button pattern as .bannerContentBtn/.bannerHomeBtn (banner-content-block.css/
   banner-home-block.css), just recoloured for this block's usual light background instead of
   a dark hero image - primary is solid dark with light text, outline is the reverse. */
.imageContentButtons{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:25px;}
.imageContentBody.center-align .imageContentButtons{justify-content:center;}
.imageContentBody.right-align .imageContentButtons{justify-content:flex-end;}

.imageContentBtn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:100px;font-size:var(--fs-16);font-family:var(--accent-font);font-weight:400;border:1px solid var(--head-font-color);transition:0.3s;}
.imageContentBtn i{font-size:16px;transition:0.3s;}

.imageContentBtn-primary{background:var(--head-font-color);color:var(--light-font-color);}
.imageContentBtn-primary:hover{background:transparent;color:var(--head-font-color);}

.imageContentBtn-outline{background:transparent;color:var(--head-font-color);}
.imageContentBtn-outline:hover{background:var(--head-font-color);color:var(--light-font-color);}

@media(max-width:767.98px){
	.imageContentRow{--bs-gutter-x:30px;}
	.imageContentBody br{display:none;}
}

@media(min-width:568px){ .imageContentBody h2{font-size:var(--fs-36);} }
@media(min-width:992px){ .imageContentBody h2{font-size:var(--fs-42);} }
@media(min-width:1600px){ .imageContentBody h2{font-size:var(--fs-48);} }