.templateSelection {
	display: grid;
	gap: var(--s-2);
	grid-template-columns: 1fr;
}

@media screen and (min-width: 640px) {
	.templateSelection {
		grid-template-columns: 1fr 1fr;
	}
}

.stageRow {
	display: flex;
	width: 100%;
	align-items: center;
	gap: var(--s-3);
}

.stageNameRow {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	align-items: center;
	justify-content: space-between;
	border-radius: var(--rounded);
	background-color: var(--color-bg-high);
	font-size: var(--fonts-xs);
	font-weight: var(--semi-bold);
	gap: var(--s-2);
	padding-block: var(--s-1-5);
	padding-inline: var(--s-3);
}

@media screen and (min-width: 640px) {
	.stageNameRow {
		flex-direction: row;
	}
}

.stageImage {
	border-radius: var(--rounded);
}

.modeButtonsContainer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-1-5);
}

.modeButton {
	padding: var(--s-1);
	border: 2px solid var(--color-border);
	border-radius: var(--rounded-full);
	background-color: var(--color-bg);
	color: var(--color-accent);
	opacity: 1 !important;
	outline: initial;
}

.modeButton.selected {
	border: 2px solid transparent;
	background-color: var(--color-bg-higher);
}

.modeButton.preselected {
	border: 2px solid var(--color-text-accent);
	background-color: var(--color-bg-higher);
}

.mode:not(.selected, .preselected) {
	filter: grayscale(100%) brightness(50%);
}