@layer components {
	.section-title {
		@apply text-2xl md:text-3xl font-semibold text-center mb-6 md:text-nowrap;
	}

	.section-description {
		@apply text-center py-1;
	}

	.section-title.border-side {
		@apply flex items-center justify-center gap-5;
	}
	
	.section-title.border-side::before,
	.section-title.border-side::after {
		@apply content-[''] w-full h-[1px] bg-current;
	}

	.section-title.border-right {
		@apply flex items-center justify-start gap-5;
	}
	
	.section-title.border-right::after {
		@apply content-[''] w-full h-[1px] bg-current;
	}

	.section-title.border-bottom {
		@apply pb-5 border-b border-current;
	}

	.section-title.border-top-bottom {
		@apply py-5 border-b border-t border-current;
	}

	.section-title.left-align {
		@apply text-left;
	}

	.section-title.left-align-border {
		@apply text-left border-l-4 border-l-[var(--rb-first-color)] px-4;
	}

	.section-title.left-align + .section-description,
	.section-title.left-align-border + .section-description {
		@apply text-left;
	}
}