.tc-clinical {
	background: var(--wp--preset--color--surface);
}

.tc-clinical .tc-section-intro {
	margin-top: var(--wp--preset--spacing--2xl);
}

.tc-clinical-grid {
	display: grid;
	/* TODO: Figma에 없음 — 임의값: 자동 줄바꿈을 위한 모바일 카드 최소 폭 280px. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--wp--custom--layout--card-min)), 1fr));
	gap: var(--wp--preset--spacing--3xl);
	margin-top: var(--wp--preset--spacing--5xl);
}

.tc-clinical-card a {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
}

.tc-clinical-media {
	display: grid;
	place-items: center;
	aspect-ratio: var(--wp--custom--aspect--clinical);
	overflow: hidden;
	border-radius: var(--wp--custom--radius--xs);
	background: var(--wp--preset--color--placeholder-light);
	color: var(--wp--preset--color--surface);
}

.tc-clinical-media span {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: var(--wp--preset--font-size--display);
	font-weight: var(--wp--custom--font-weight--bold);
}

.tc-card-label {
	color: var(--wp--preset--color--primary-label);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: var(--wp--custom--font-weight--bold);
}

.tc-clinical-card h3 {
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--card-title);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--base);
}

.tc-clinical-card a:hover .tc-clinical-media,
.tc-clinical-card a:focus-visible .tc-clinical-media {
	background: var(--wp--preset--color--border);
}