.fl-module.fl-module-section-title .fl-module-content {
	margin-bottom: 0;
}

.section-title-holder {
	position: relative;
	width: 100%;
	margin-bottom: 0;
}

.section-title-holder.mb-yes {
	margin-bottom: 2rem;
}

p.pre-title {
	text-align: inherit;
	color: var(--wp--preset--color--wpbf-palette-color-6);
	font-family: var(--font-head);
	font-size: var(--text-size-400);
}

.title-text {
	text-align: inherit;
	font-family: var(--font-head);
	font-size: var(--text-size-500);
	margin: 0 auto;
	max-width: 80ch;
}

.section-title-holder.align-left .title-text {
	margin-left: 0;
}
.section-title-holder.align-right .title-text {
	margin-right: 0;
}

/* Title colours (the options existed with no CSS). Default keeps the inherited colour */
.title-text.col-dark {
	color: var(--wp--preset--color--wpbf-palette-color-3);
}
.title-text.col-white {
	color: var(--wp--preset--color--wpbf-palette-color-2);
}

/* Orange rule under the title (ML Windscreens: 60px, gradient, decorative) */
.section-title-holder.has-rule .title-text::after {
	content: "";
	display: block;
	width: 3.75rem;
	height: 0.3125rem;
	margin-top: 1.5rem;
	background: var(--gradient-orange);
}
.section-title-holder.has-rule.align-center .title-text::after {
	margin-inline: auto;
}
.section-title-holder.has-rule.align-right .title-text::after {
	margin-left: auto;
}

/* The clamp tokens already scale the title for phones (this used to jump to 600 here) */
@media (max-width: 768px) {
	.fl-module.fl-module-section-title .fl-module-content {
		margin-bottom: 0;
	}
	.section-title-holder.has-rule.align-r-left .title-text::after {
		margin-inline: 0 auto;
	}
	.section-title-holder.has-rule.align-r-center .title-text::after {
		margin-inline: auto;
	}
}