.cbp-heading {
	line-height: 1.125;

	width: 100%;

	margin-block-end: 1rem;

	word-break: break-word;

	&:is(h1) {
		font-family: var(--typography-heading_1-font, "sans-serif");
		font-size: var(--typography-heading_1-size, 2.5rem);
		font-weight: var(--typography-heading_1-weight, 600);
		letter-spacing: var(--typography-heading_1-letterspacing, "normal");
	}

	&:is(h2) {
		font-family: var(--typography-heading_2-font, "sans-serif");
		font-size: var(--typography-heading_2-size, 2.5rem);
		font-weight: var(--typography-heading_2-weight, 600);
		letter-spacing: var(--typography-heading_2-letterspacing, "normal");
	}

	&:is(h3) {
		font-family: var(--typography-heading_3-font, "sans-serif");
		font-size: var(--typography-heading_3-size, 2.5rem);
		font-weight: var(--typography-heading_3-weight, 600);
		letter-spacing: var(--typography-heading_3-letterspacing, "normal");
	}

	&:is(h4) {
		font-family: var(--typography-heading_4-font, "sans-serif");
		font-size: var(--typography-heading_4-size, 2.5rem);
		font-weight: var(--typography-heading_4-weight, 600);
		letter-spacing: var(--typography-heading_4-letterspacing, "normal");
	}

	&:is(h5) {
		font-family: var(--typography-heading_5-font, "sans-serif");
		font-size: var(--typography-heading_5-size, 2.5rem);
		font-weight: var(--typography-heading_5-weight, 600);
		letter-spacing: var(--typography-heading_5-letterspacing, "normal");
	}

	&:is(h6) {
		font-family: var(--typography-heading_6-font, "sans-serif");
		font-size: var(--typography-heading_6-size, 2.5rem);
		font-weight: var(--typography-heading_6-weight, 600);
		letter-spacing: var(--typography-heading_6-letterspacing, "normal");
	}

	&:last-child {
		margin-block-end: 0;
	}
}

.cbp-overhead {
	font-family: var(--typography-overhead-font, "sans-serif");
	font-variant: all-small-caps;
	font-size: var(--typography-overhead-size, 1rem);
	font-weight: var(--typography-overhead-weight, 600);

	letter-spacing: var(--typography-overhead-letterspacing, "normal");
	line-height: 1.25;

	margin-block-end: 0.5rem;
}

.cbp-body {
	font-family: var(--typography-body-font, "sans-serif");
	font-size: var(--typography-body-size, 1rem);
	font-weight: var(--typography-body-weight, 400);
	letter-spacing: var(--typography-body-letterspacing, "normal");
}

.cbp-button {
	cursor: pointer;

	display: block;

	font-family: var(--typography-body-font, "sans-serif");
	font-size: var(--typography-body-size, 1rem);
	font-weight: var(--typography-body-weight, 400);
	letter-spacing: var(--typography-body-letterspacing, "normal");

	text-decoration: none;

	width: fit-content;

	&:not(.cbp-button--text) {
		text-align: center;

		transition: var(--transition-button-hover);

		border: 2px solid var(--color-accent);

		padding: 0.75rem 3.88rem;
		border-radius: var(--radius-border-small);
		margin-block-start: 2rem;

		.cbp-button__label {
			font-weight: 600;
			line-height: 1.25;
		}
	}

	&.cbp-button--primary {
		color: var(--color-accent-content);
		background-color: var(--color-accent);

		&:hover {
			color: var(--color-accent-content-hover);
			background-color: var(--color-accent-hover);
			border-color: var(--color-accent-hover);
		}
	}

	&.cbp-button--secondary {
		color: var(--color-accent);
		background-color: transparent;

		&:hover {
			color: var(--color-accent-content-hover);
			background-color: var(--color-accent-hover);
			border-color: var(--color-accent-hover);
		}
	}

	&.cbp-button--text {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0.5em;

		color: var(--color-text);

		padding: 0;
		margin-block-start: 2rem;

		border: none;

		background-color: transparent;

		transition: color 0.3s ease;

		&:hover {
			color: var(--color-text-hover);
		}

		.cbp-button__label {
			color: currentColor;

			font-weight: 600;
			line-height: 1.25;
		}
	}
}

.cbp-module {
	--spacing-sm: 50px;
	--spacing-md: 100px;
	--spacing-lg: 200px;

	/* mt = Margin Top */
	&.mt-sm {
		margin-block-start: var(--spacing-sm);
	}
	&.mt-md {
		margin-block-start: var(--spacing-md);
	}
	&.mt-lg {
		margin-block-start: var(--spacing-lg);
	}
	&.mt-none {
		margin-block-start: 0;
	}

	/* mb = Margin Bottom */
	&.mb-sm {
		margin-block-end: var(--spacing-sm);
	}
	&.mb-md {
		margin-block-end: var(--spacing-md);
	}
	&.mb-lg {
		margin-block-end: var(--spacing-lg);
	}
	&.mb-none {
		margin-block-end: 0;
	}
}