Template:Tournament row/styles.css

.loka-tournament-list {
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 5px;
	overflow: hidden;
	background: rgba(18, 18, 18, .45);
}

.loka-tournament-list-header,
.loka-tournament-list-row {
	display: grid;
	grid-template-columns: minmax(150px, 1.5fr) minmax(112px, .9fr) minmax(92px, .7fr) minmax(130px, 1fr) minmax(120px, 1fr);
	column-gap: .75em;
	align-items: center;
}

.loka-tournament-list-header {
	padding: .48em .7em;
	color: #f0cf8e;
	font-size: .68em;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, .045);
}

.loka-tournament-list-row {
	min-height: 42px;
	padding: .48em .7em;
	font-size: .84em;
	border-top: 1px solid rgba(255, 255, 255, .075);
}

.loka-tournament-list-row:hover {
	background: rgba(255, 255, 255, .035);
}

.loka-tournament-list-name,
.loka-tournament-list-date,
.loka-tournament-list-format,
.loka-tournament-list-host,
.loka-tournament-list-winner {
	min-width: 0;
}

.loka-tournament-list-primary,
.loka-tournament-list-secondary {
	display: block;
}

.loka-tournament-list-primary {
	font-family: UNIVERSAL-SERIF, serif;
	font-size: 1.08em;
	font-variant: small-caps;
	font-weight: 600;
}

.loka-tournament-list-secondary {
	margin-top: .08em;
	font-size: .72em;
	opacity: .58;
}

.loka-tournament-list-row img {
	image-rendering: pixelated;
}

@media (max-width: 760px) {
	.loka-tournament-list-header {
		display: none;
	}

	.loka-tournament-list-row {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"name date"
			"host format"
			"winner winner";
		row-gap: .22em;
		padding: .62em .7em;
	}

	.loka-tournament-list-name { grid-area: name; }
	.loka-tournament-list-date { grid-area: date; text-align: right; }
	.loka-tournament-list-format { grid-area: format; text-align: right; }
	.loka-tournament-list-host { grid-area: host; }
	.loka-tournament-list-winner { grid-area: winner; font-size: .9em; opacity: .78; }
}

@media (prefers-color-scheme: light) {
	.loka-tournament-list {
		background: rgba(255, 255, 255, .58);
		border-color: rgba(0, 0, 0, .1);
	}

	.loka-tournament-list-header {
		color: #8b5d22;
		background: rgba(0, 0, 0, .035);
	}

	.loka-tournament-list-row {
		border-top-color: rgba(0, 0, 0, .08);
	}

	.loka-tournament-list-row:hover {
		background: rgba(0, 0, 0, .025);
	}
}