.face {
	--card-base: #242b35;
	--card-light: #485666;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	max-width: 28rem;
	min-height: 15rem;
	padding: clamp(1.1rem, 3vw, 1.6rem);
	border-radius: 1.25rem;
	color: #fff;
	background: linear-gradient(125deg, var(--card-light), var(--card-base) 75%);
	box-shadow:
		inset 0 1px 0 #ffffff40,
		0 8px 18px #18233118;
}
.face::before {
	content: "";
	position: absolute;
	z-index: -1;
	width: 24rem;
	height: 24rem;
	border: 1px solid #ffffff20;
	border-radius: 50%;
	right: -13rem;
	top: -9rem;
	box-shadow:
		0 0 0 2.5rem #ffffff08,
		0 0 0 5rem #ffffff06;
}
.face[data-tone="green"] {
	--card-base: #07543c;
	--card-light: #21844a;
}
.face[data-tone="yellow"] {
	--card-base: #edbe26;
	--card-light: #ffe478;
	color: #252316;
}
.face[data-tone="red"] {
	--card-base: #980f28;
	--card-light: #d63244;
}
.face[data-tone="blue"] {
	--card-base: #073f86;
	--card-light: #226db8;
}
.top,
.bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
}
.bank {
	font-size: 1.05rem;
	font-weight: 750;
	overflow-wrap: anywhere;
}
.archive {
	font-size: 0.7rem;
	border: 1px solid currentColor;
	border-radius: 2rem;
	padding: 0.2rem 0.5rem;
	flex-shrink: 0;
}
.hardware {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 1.4rem 0 1.1rem;
}
.chip {
	display: block;
	width: 2.5rem;
	height: 1.9rem;
	border: 1px solid #a99054;
	border-radius: 0.4rem;
	background:
		linear-gradient(
			90deg,
			transparent 30%,
			#9b875a 31%,
			transparent 33%,
			transparent 66%,
			#9b875a 67%,
			transparent 69%
		),
		linear-gradient(
			0deg,
			transparent 32%,
			#9b875a 33%,
			transparent 36%,
			transparent 65%,
			#9b875a 66%,
			transparent 69%
		),
		linear-gradient(135deg, #e5d6a6, #bfaa75 50%, #f1e6c4);
}
.number {
	font-family: var(--mantine-font-family-monospace);
	font-size: clamp(1rem, 2.3vw, 1.35rem);
	letter-spacing: 0.06em;
	white-space: nowrap;
	margin-bottom: 1.25rem;
}
.details {
	min-width: 0;
}
.name {
	font-size: 0.8rem;
	opacity: 0.9;
	overflow-wrap: anywhere;
}
.balance {
	font-size: clamp(1.2rem, 2.5vw, 1.55rem);
	font-weight: 650;
	overflow-wrap: anywhere;
	margin-top: 0.2rem;
}

.network {
	flex-shrink: 0;
	font-weight: 850;
	font-style: italic;
	font-size: 1.35rem;
}
.network[data-network="mastercard"] {
	font-size: 0.65rem;
	font-weight: 600;
	font-style: normal;
	text-align: center;
}
.circles {
	display: block;
	width: 3.3rem;
	height: 2rem;
	margin: 0 auto 0.15rem;
	position: relative;
}
.circles::before,
.circles::after {
	content: "";
	position: absolute;
	top: 0;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
}
.circles::before {
	left: 0;
	background: #eb302b;
}
.circles::after {
	right: 0;
	background: #ffad19;
	opacity: 0.9;
}