/* ribbon */
.rev-card-ribbon {
	position: absolute;
	top: -7px;
	inset-inline: 8px;
	z-index: 5;
	display: flex;
	justify-content: center;
	padding-inline-start: clamp(48px, 28%, 180px);
	box-sizing: border-box;
	pointer-events: none;
	line-height: 0;
	white-space: nowrap;
	overflow: hidden;
}

.rev-card-ribbon-content {
	z-index: 1;
	border-radius: 0 0 2px 2px;
	max-inline-size: 95%;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.1px;
	text-transform: uppercase;
	font-size: var(--font-size-6);
	font-size: max(14px, var(--font-size-6));
	padding: calc(var(--padding-3) / 2) var(--padding-3)
		calc(var(--padding-3) / 3);
	background: var(--theme-color);
	color: var(--theme-fixed);
}

.rev-card-ribbon-fold {
	width: 9px;
	height: 8px;
	z-index: 0;
	margin-block-start: -1px;
	background-color: var(--theme-color);
	filter: contrast(0.4);
	background-image: linear-gradient(
		color-mix(in srgb, var(--theme-color) 30%, transparent),
		color-mix(in srgb, var(--theme-color) 30%, transparent)
	);
}

.rev-card-ribbon-fold-left {
	margin-inline-end: -1.56px;
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.rev-card-ribbon-fold-right {
	margin-inline-start: -1.56px;
	clip-path: polygon(0 0, 0 100%, 100% 100%);
}

[dir="rtl"] .rev-card-ribbon-fold-left {
	clip-path: polygon(0 0, 0 100%, 100% 100%);
}

[dir="rtl"] .rev-card-ribbon-fold-right {
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}