Module:VehicleVariants/styles.css

.template-vehicleVariants {
	margin-top: var( --space-md );
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 320px,1fr ) );
	gap: var( --space-xs );
}

.template-vehicleVariant {
	position: relative;
	border: 1px solid var( --border-color-base );
	border-radius: var( --border-radius--medium );
	overflow: hidden;
}

.template-vehicleVariant.template-vehicleVariant--selected {
	order: -1;
	background: var( --color-surface-2 );
}

.template-vehicleVariant-fakelink {
	position: absolute;
	inset: 0;
	opacity: 0;
	z-index: 2;
}

.template-vehicleVariant-fakelink a {
	display: block;
	height: 100%;
}

.template-vehicleVariant-image {
	position: relative;
	z-index: 0;
	height: 160px;
}

.template-vehicleVariant-image img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	transition: var( --transition-hover );
	transition-property: transform;
}

.template-vehicleVariant-image::before {
	position: absolute;
	content: "";
	inset: 0px;
	background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 100%) center top / cover;
	background-position: center top;
	z-index: 1;
	transition: var( --transition-hover );
	transition-property: opacity;
}

.template-vehicleVariant-text {
	position: absolute;
	bottom: var( --space-sm );
	left: var( --space-md );
	right: var( --space-md );
	line-height: var( --line-height-sm );
	overflow-wrap: break-word;
	transition: var( --transition-hover );
	transition-property: opacity;
}

.template-vehicleVariant-title {
	color: var( --color-base--emphasized );
	font-size: var( --font-size-small );
    font-weight: var( --font-weight-medium );
}

.template-vehicleVariant-subtitle {
	color: var( --color-base--subtle );
	font-size: var( --font-size-x-small );
}

.template-vehicleVariant:not(.template-vehicleVariant--selected):hover {
	background: var( --background-color-quiet--hover );
}

.template-vehicleVariant:not(.template-vehicleVariant--selected):active {
	background: var( --background-color-quiet--active );
}

.template-vehicleVariant:not(.template-vehicleVariant--selected):hover .template-vehicleVariant-image img {
	transform: scale( 1.1 );
}

.template-vehicleVariant:not(.template-vehicleVariant--selected):hover .template-vehicleVariant-image::before,
.template-vehicleVariant:not(.template-vehicleVariant--selected):hover .template-vehicleVariant-text {
	opacity: 0;
}