Template:Tess list entry/styles.css

.template-tess-list-entry-title {
	border-bottom: solid var(--border-width-thick) var(--color-amaranth-legacy-scope);
	margin-bottom: var(--space-xs);
}

.template-tess-list-entry-subtitle {
	font-style: italic;
}

.template-tess-list-entry-main {
	display: flex;
	justify-content: flex-start;
	gap: var(--space-sm);
}

.template-tess-list-entry-main > * {
	display: inline-block;
}

.template-tess-list-entry-image {
	width: 100%;
	max-width: 300px;
	margin-block: auto;
	margin-inline: auto;
}

.template-tess-list-entry-image img {
	/* prevent overflowing */
	object-fit: contain;
	width: 100%;
	height: auto;
}

.template-tess-list-entry-image img[src$=".svg"] {
	/* background color for transparent SVGs */
	background: #eaecf0;
}

.template-tess-list-entry-labels {
	flex-grow: 1;
}

.template-tess-list-entry-label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.template-tess-list-entry-label-part {
	word-break: break-all;
	max-width: 40%;
}

.template-tess-list-entry-label-space {
	display: inline-block;
	flex: 1 0;
	margin-inline: var(--space-xs);
	height: 0;
	border-bottom: dotted var(--color-subtle) var(--border-width-thick);
}

@media screen and (max-width: 639px) { 
	.template-tess-list-entry-main {
		flex-direction: column;
	}
}