Modul:ItemVariants/styles.css

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

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

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

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

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

.template-itemVariant-fakelink {
	position: absolute;
    inset: 0;
    opacity: 0;
}

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

.template-itemVariant-image {
    height: 128px;
}

.template-itemVariant-image img {
	height: 100%;
    width: 100%;
    object-fit: cover;
}

.template-itemVariant-title {
	padding: var( --space-sm ) 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 );
}