.tabs {
	display: flex;
	flex-wrap: wrap;
	background: var(--dsr-color-dark-3); /* New */
}
.tabs > label {
	order: 1;
	display: block;
	padding: 1rem 2rem 0.6rem;
	margin-right: 0.2rem;
	cursor: pointer;
	/* background: var(--dsr-color-yellow); */  /* New */
	transition: background ease 0.2s;
	/* margin-bottom: 0.2rem; */  /* New */
	color: var(--dsr-color-white); /* New */
	border-bottom: 0.2rem solid transparent; /* New */
	transition: border-bottom-color .5s ease; /* New */
}
.tabs > label:hover {
	/* background: var(--dsr-color-yellow-hover); */ /* New */
	border-bottom: 0.2rem solid var(--dsr-color-yellow); /* New */
}
.tabs .tab {
	order: 99;
	flex-grow: 1;
	width: 100%;
	display: none;
	padding: 1rem;
	background: #fff;
}
.tabs > input[type="radio"] {
	display: none;
}
.tabs > input[type="radio"]:checked + label {
	/* background: #fff; */  /* New */
	border-bottom: 0.2rem solid var(--dsr-color-yellow);
	font-weight: bold;
}
.tabs > input[type="radio"]:checked + label + .tab {
	display: flex;
	flex-wrap: wrap;
}
.tabs .spacer {
	padding: 0;
	border-bottom: 3px solid var(--dsr-color-yellow);
	height: 0;
	flex-grow: 1;
	align-self: flex-end;
	cursor: default;
}
@media (max-width: 45em) {
	.tabs .tab,
	.tabs label {
		order: initial;
	}
	.tabs > label {
		width: 100%;
		margin-right: 0;
		margin-top: 0.2rem;
		padding: 1rem 2rem 1rem;
	}
	.tabs > input[type="radio"]:checked + label + .tab {
		overflow: auto;
		max-height: 100vh;
	}
	.tabs .spacer {
		display: none;
	}
}