/* Responsive live single-product font showcase. */
.bestteamfont-live-showcase {
	min-width: 0;
	width: 100%;
}

.bestteamfont-live-showcase__grid {
	display: grid;
	grid-template-columns: repeat(10, minmax(0, 1fr));
	gap: 8px;
	font-family: var(--showcase-font), sans-serif;
}

.bestteamfont-live-showcase__card {
	display: flex;
	min-width: 0;
	min-height: 0;
	padding: clamp(14px, 2.3vw, 30px);
	overflow: hidden;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(17, 17, 17, .16);
	border-radius: 5px;
	text-align: center;
}

.bestteamfont-live-showcase__card span {
	display: block;
	max-width: 100%;
	overflow-wrap: anywhere;
	font: inherit;
	line-height: .98;
}

.bestteamfont-live-showcase__card--title,
.bestteamfont-live-showcase__card--pangram {
	grid-row: 1;
	aspect-ratio: 3 / 2;
}

.bestteamfont-live-showcase__card--title {
	grid-column: 1 / 6;
	font-size: clamp(54px, 7vw, 124px);
}

.bestteamfont-live-showcase__title-text {
	display: grid !important;
	gap: .04em;
	width: 100%;
	line-height: .86 !important;
}

.bestteamfont-live-showcase__title-text > span {
	display: flex;
	justify-content: center;
	overflow-wrap: normal;
	white-space: nowrap;
}

.bestteamfont-live-showcase__title-letter {
	display: inline-block;
	will-change: transform, opacity, filter;
}

.bestteamfont-live-showcase__title-letter.is-space {
	width: .24em;
}

.bestteamfont-live-showcase__card--pangram {
	grid-column: 6 / 11;
	font-size: clamp(25px, 3.2vw, 48px);
}

.bestteamfont-live-showcase__card--upper {
	grid-column: 1 / 11;
	grid-row: 2;
	aspect-ratio: 9.4 / 1;
	font-size: clamp(21px, 2.8vw, 42px);
	letter-spacing: .025em;
}

.bestteamfont-live-showcase__card--hello,
.bestteamfont-live-showcase__card--name {
	grid-column: 1 / 5;
	font-size: clamp(40px, 5vw, 72px);
}

.bestteamfont-live-showcase__card--hello {
	grid-row: 3;
	aspect-ratio: 2.25 / 1;
}

.bestteamfont-live-showcase__card--name {
	grid-row: 4;
	aspect-ratio: 1.8 / 1;
	flex-direction: column;
	gap: clamp(6px, .8vw, 13px);
	font-size: clamp(32px, 3.5vw, 56px);
	line-height: 1.25;
}

.bestteamfont-live-showcase__profession {
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(8px, .72vw, 12px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .34em;
	text-transform: uppercase;
}

.bestteamfont-live-showcase__card--copy {
	grid-column: 5 / 11;
	grid-row: 3 / 5;
	justify-content: flex-start;
	aspect-ratio: 1.48 / 1;
	font-size: clamp(18px, 2.25vw, 34px);
	text-align: left;
}

.bestteamfont-live-showcase__rotating,
.bestteamfont-live-showcase__typing,
.bestteamfont-live-showcase__profession {
	transform: translateY(0);
	opacity: 1;
	transition: opacity .32s ease, transform .32s ease;
}

.bestteamfont-live-showcase .is-switching {
	transform: translateY(.14em);
	opacity: 0;
}

.bestteamfont-live-showcase__typing.is-typing::after {
	display: inline-block;
	width: .08em;
	height: .82em;
	margin-left: .08em;
	background: currentColor;
	content: "";
	vertical-align: -.03em;
	animation: bestteamfont-showcase-caret .8s steps(1, end) infinite;
}

@keyframes bestteamfont-showcase-caret {
	0%, 48% { opacity: 1; }
	49%, 100% { opacity: 0; }
}

@media (max-width: 700px) {
	.bestteamfont-live-showcase__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 5px;
	}

	.bestteamfont-live-showcase__card--title,
	.bestteamfont-live-showcase__card--pangram,
	.bestteamfont-live-showcase__card--upper,
	.bestteamfont-live-showcase__card--hello,
	.bestteamfont-live-showcase__card--name,
	.bestteamfont-live-showcase__card--copy {
		grid-column: 1 / 3;
		grid-row: auto;
	}

	.bestteamfont-live-showcase__card--copy { aspect-ratio: 1.65 / 1; }
	.bestteamfont-live-showcase__card--upper {
		min-height: clamp(108px, 30vw, 150px);
		padding: 24px 16px;
		aspect-ratio: auto;
		font-size: clamp(17px, 5.6vw, 25px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bestteamfont-live-showcase__rotating,
	.bestteamfont-live-showcase__typing,
	.bestteamfont-live-showcase__profession { transition: none !important; }
	.bestteamfont-live-showcase__typing::after { display: none !important; animation: none !important; }
}