Module:VehicleVariants/styles.css

.template-vehicleVariants {
	margin-top: var( --space-md );
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 128px,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: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-fakelink {
	position: absolute;
    inset: 0;
    opacity: 0;
	z-index: 2;
}

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

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

.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;
}

.template-vehicleVariant-title {
	position: absolute;
	bottom: var( --space-sm );
	left: var( --space-md );
	right: var( --space-md );
	color: var( --color-base--emphasized );
	font-size: var( --font-size-small );
    font-weight: var( --font-weight-medium );
    line-height: var( --line-height-sm );
	overflow-wrap: break-word;
}