Template:Tess list entry/styles.css

.template-tess-list-entry {
	margin-block: var(--space-sm);
	background: var(--color-surface-2);
	padding: var(--space-sm);
	border: var(--color-amaranth-legacy-scope) solid 4px;
	box-shadow: var(--color-amaranth-legacy-scope) 0 0 10px;
	text-align: center;
}

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

.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: 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;
	margin-block: auto;
}

.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: 75%;
}

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

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

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