View source for Module:CardLua/styles.css

.t-card {
	border: 1px solid var(--border-color-base);
	border-radius: 2px;
	padding: 12px;
	display: flex;
	gap: 4px 8px;
}

.t-card--is-link {
	position: relative;
	transition-property: border-color;
	transition-duration: 100ms;
	transition-timing-function: ease;
}

.t-card--is-link:hover {
	/* TODO: Switch to use --border-color-interactive--hover when it is in Citizen */
	border-color: var(--color-link--hover);
}

.t-card--is-link:active {
	/* TODO: Switch to use --border-color-interactive--active when it is in Citizen */
	border-color: var(--color-link--active);
}

.t-card__text {
	flex-grow: 1;
}

.t-card__title {
	font-weight: 600;
	font-family: var(--cp-font-family-heading);
}

.t-card__description {
	color: var(--color-subtle);
}

/*
:has() is not supported yet by CSS Sanitizer in MediaWiki.

.t-card--is-link:has(.t-card__link a.mw-selflink) {
	border-color: var(--border-color-base);
}
*/

/* Overlay the link on top of the card to make MW links work with divs*/
.t-card__link {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.t-card__link a {
	display: block;
	height: 100%;
}