.subpage-background {
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: -1;
	object-fit: cover;
	opacity: 0.2;
}

.error-message {
	width: 90%;
	height: 20%;
	display: none;
	font-size: 1.3rem;
	text-align: center;
	margin: 0 auto;
	padding: var(--spacing-small);
	border: 2px solid var(--color-gold);
	box-shadow: 0 0 15px rgb(227, 165, 74);
	background: transparent;
}

.cards__card {
	display: flex;
	flex-direction: column;
	/* gap: var(--spacing-small); */
}

img {
	border: .5px solid #000;
	margin-bottom: var(--spacing-medium);
}

.card__content li {
	margin-bottom: var(--spacing-xsmall);
}

h5 {
	margin-bottom: var(--spacing-medium);
	font-size: 18px;
}

li span:nth-last-of-type(2) {
	font-weight: 800;
	margin-right: .5rem;
}

.light-saber {
	width: 75%;
	height: 6px;
	border-radius: 6px;
	box-shadow:0 0 5px #fff,0 0 8px #fff,0 0 12px #942222,0 0 15px #881119,0 0 25px #a1121c;  /* Shadow inspiration Popov A.V. at: https://codepen.io/Asgator */
	overflow: hidden;
	display: flex;	
	margin: var(--spacing-large) auto var(--spacing-large);	
}

.light-saber div:nth-of-type(1),
.light-saber div:nth-of-type(3) {
	flex-basis: 80%;
	background:#fff;
}

.light-saber div:nth-of-type(2) {
	flex-basis: 20%;
	border: 2px dotted #fff;
	background: grey;

}

@media screen and (min-width: 700px) {
	nav {
		display: flex;
		flex-direction: row;
		justify-content: center;
		gap: var(--spacing-medium);
	}

	.card__image {
		width: 22rem;
		height: 12rem;
	}	

	.cards__card {
		flex-direction: row;
		margin-bottom: 3rem;
		gap: var(--spacing-medium);
	}
	
	.cards__card div {
		max-width: 60% ;
	}
}