.cards {
	/* Position the wrapper */
	width: 90vmin;
	height: 90vmin;
	margin: 0 auto;

	/* Make sure the cards are on one line (1/2) */
	display: flex;
	flex-wrap: nowrap;
	overflow: scroll;

	/* Enable scroll-snapping (2/2) */
	scroll-snap-type: x mandatory;

	border-radius: 1rem;
	background: rgb(0 0 0 / 0.15);

	&::after {
		scroll-snap-align: center;
		content: "fin.";
		display: block;
		flex: 0 0 100%;
		display: grid;
		place-content: center;
		text-align: center;

		font-style: italic;
		font-weight: 100%;
	}
}

.card {
	/* Make sure the cards are on one line (1/2) */
	flex: 0 0 100%;
	height: 100%;

	/* Enable scroll-snapping (2/2) */
	scroll-snap-align: center;

	/* Needed to position the contents of each card */
	position: relative;
}

.card {
	display: grid;
	place-content: center;
	text-align: center;

	& model-viewer {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
	}

	:is(h1, h2) {
		color: #fff;
		background: #000;
		display: inline-block;
	}

	& h1 {
		font-size: clamp(1.5rem, calc(2.5vmin + 1rem), 7rem);
		border-radius: 1rem;
		padding: clamp(0.4rem, calc(2.5vmin + 0.4rem), 1.4rem);
	}

	& h2 {
		font-family: 'Exo 2', sans-serif;
		font-size: clamp(1rem, calc(1vmin + 1rem), 4rem);
		position: absolute;
		left: 1rem;
		top: 1rem;
		border-radius: 0.4rem;
		padding: clamp(0.2rem, calc(1vmin + 0.2rem), 1rem);
  }

	& footer {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: center;

		font-style: italic;
		font-weight: 100%;
	}

	& a {
		color: black;
	}
}

model-viewer::part(default-progress-bar) {
	display: none;
}

.warning {
	position: fixed;
	top: 15vh;
	left: 1rem;
	right: 1rem;
	max-width: 96ch;
	margin: auto;
	z-index: 2;
	font-size: 2em;
}

@layer layout {
	* {
		box-sizing: border-box;
	}

	html, body {
		margin: 0;
		padding: 0;
		height: 100%;
	}

	html {
		background: white;
		color: black;
	}

	body {
		display: grid;
		place-content: safe center;
	}

	.cards {
		font-family: 'Exo 2', sans-serif;
	}
}