.c-btn,
.bricks-button.c-btn,
.c-btn.bricks-button {
	--btn-bg: var(--secondary);
	--btn-bg-hover: var(--dark-base);
	--btn-text: var(--light);
	--btn-cut: 1.6rem;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);

	width: fit-content;
	min-height: 4.4rem;
	padding: var(--space-xs) var(--space-l);

	background-color: var(--btn-bg) !important;
	color: var(--btn-text) !important;
	border: 0 !important;
	border-radius: 0 !important;

	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--btn-cut)),
		calc(100% - var(--btn-cut)) 100%,
		0 100%
	);

	font-family: 'Roboto Slab', serif;
	font-size: var(--text-s);
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none !important;

	transition:
		background-color 0.2s ease,
		transform 0.2s ease;
}

.c-btn:hover,
.bricks-button.c-btn:hover,
.c-btn.bricks-button:hover {
	background-color: var(--btn-bg-hover) !important;
	color: var(--btn-text) !important;
	transform: translateY(-1px);
}

.c-btn--primary {
	--btn-bg: var(--secondary);
	--btn-bg-hover: var(--dark-base);
	--btn-text: var(--light);
}

.c-btn--dark {
	--btn-bg: var(--dark-base);
	--btn-bg-hover: var(--secondary);
	--btn-text: var(--light);
}

.c-btn--blue-primary {
	--btn-bg: var(--secondary);
	--btn-bg-hover: var(--primary);
	--btn-text: var(--light);
}




.c-btn--angle,
.bricks-button.c-btn--angle,
.c-btn--angle.bricks-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: fit-content !important;
	min-width: 22rem !important;
	padding: var(--space-s) var(--space-xl) !important;

	background-color: var(--secondary) !important;
	color: var(--light) !important;

	border: 0 !important;
	border-radius: 0 !important;

	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - 2.6rem),
		calc(100% - 2.6rem) 100%,
		0 100%
	);

	font-family: 'Roboto Slab', serif !important;
	font-size: var(--text-m) !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	text-align: center !important;
	text-decoration: none !important;

	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;
}

.c-btn--angle:hover,
.bricks-button.c-btn--angle:hover,
.c-btn--angle.bricks-button:hover {
	background-color: var(--primary) !important;
	color: var(--light) !important;
	transform: translateY(-1px);
}

.c-btn--angle-dark,
.bricks-button.c-btn--angle-dark,
.c-btn--angle-dark.bricks-button {
	background-color: var(--dark-base) !important;
	color: var(--light) !important;
}

.c-btn--angle-dark:hover,
.bricks-button.c-btn--angle-dark:hover,
.c-btn--angle-dark.bricks-button:hover {
	background-color: var(--primary) !important;
	color: var(--light) !important;
}