.page-title .special {
	background-color: var(--color-red);
	color: white;
	font-family: inherit;
	padding: 0 1vw;
}

#repertoire-list {
	margin: 2rem 0;

	row-gap: 1rem;
}

#repertoire-list .tile {
	background-color: var(--color-green);
	background-size: cover;
	background-position: center;

	width: 100%;
	min-height: 20rem;
	border-radius: 10px;

	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	align-items: center;

	color: white;

	padding: 0.5rem;
}

#repertoire-list .tile .text {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;

	row-gap: 0.5rem;

	height: 100%;

	text-align: center;

	text-shadow: 0.2rem 0.2rem 4px black;
}

#repertoire-list .tile .text .based_on_text {
	font-size: 1.8rem;
}

#repertoire-list .tile .text .name {
	font-size: 2.2rem;
}

#repertoire-list .tile .text :is(.slogan_text, .directed_by_text) {
	font-size: 1.5rem;
}

#repertoire-list .tile a.button {
	width: 18rem;
	height: 4rem;

	margin: 1rem;

	font-family: "Dela Gothic One";
	font-size: 1.8rem;

	line-height: 4rem;
}

@media screen and (width < 1140px) {
	.page-title {
		font-size: 2.5rem !important;
	}
}