Template:NavCard/styles.css

.t-navcard {
	text-align: center;
	font-size: 1.125rem;
}

.t-navcard__card.t-card {
	flex-direction: column;
	justify-content: center;
	background-color: var(--background-color-interactive-subtle);
	/* Prevent the border being overridden by hover state */
	border-color: var(--border-color-interactive) !important;
	transition-property: border-color, box-shadow;
}

.t-navcard__card.t-card .t-card__thumbnail img {
	width: 100%;
	height: 80px;
	object-fit: contain;
	image-rendering: pixelated;
}

.t-navcard:hover .t-navcard__card.t-card {
	background-color: var(--background-color-interactive);
}

.t-navcard:active .t-navcard__card.t-card {
	background-color: var(--background-color-interactive-subtle);
}

/* Opt out of nearest-neighbor scaling, for smooth (non-pixel-art) images.
   Specificity must exceed the default rule above to override it. */
.t-navcard--smooth .t-navcard__card.t-card .t-card__thumbnail img {
	image-rendering: auto;
}