Template:Character list/styles.css

/* ===================================================
 * Base
 * =================================================== */

.pm-character-list {
	display: flex;
	flex-direction: column;
	gap: 1.5em;
}

.pm-character-list-item-body {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: 1rem;
	gap: 1rem;
}

.pm-character-list-item-text {
	width: 100%;
	flex: 1 1 0;
}

.pm-character-list-item-thumb {
	order: -1;
}

.pm-character-list-item:nth-child(odd) .pm-character-list-item-thumb {
	order: inherit;
}

.pm-character-list-item-pvs {
	display: grid;
	margin-top: 1rem;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.pm-character-list-item-aside {
	flex: 0 0 100%;
}

/* ===================================================
 * Tablet
 * MediaWiki breakpoint: 640px
 * =================================================== */

@media screen and (min-width: 640px) {	
	.pm-character-list-item-aside {
		flex: 0 0 auto;
	}

	.pm-character-list-item-pvs {
		grid-template-columns: repeat(auto-fit, 300px);
	}
}

 /* ===================================================
 * Desktop
 * MediaWiki breakpoint: 1120px
 * =================================================== */

@media screen and (min-width: 1120px) {
	.pm-character-list-item-body {
		flex-wrap: nowrap;
	}
}