html,
body {
	scrollbar-gutter: stable;
}

.container {
	#more {
		display: none;
	}

	.more {
		.card {
			animation: view-cards both linear;
			animation-timeline: view(y 90dvh auto);
		}
	}

	&:not(:has(input[type="checkbox"]:checked)) {
		.more {
			display: none;
		}
	}
}

@keyframes view-cards {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/*
 *
 * demo
 * 
*/
body {
	--stop-color-1: #1e1f26;
	--stop-color-2: #2c303a;

	margin: 0;
	font-family: sans-serif;
	background-color: var(--stop-color-1);
	background-image: radial-gradient(var(--stop-color-2) 15%, transparent 16%),
		repeating-linear-gradient(
			0deg,
			transparent 6.5%,
			var(--stop-color-1) 7%,
			var(--stop-color-1) 9%,
			transparent 10%
		),
		linear-gradient(
			45deg,
			transparent 49%,
			var(--stop-color-2) 49%,
			var(--stop-color-2) 51%,
			transparent 51%
		),
		linear-gradient(
			135deg,
			transparent 49%,
			var(--stop-color-2) 49%,
			var(--stop-color-2) 51%,
			transparent 51%
		);
	background-size: 1rem 1rem;
	background-attachment: fixed;
}

.container {
	max-width: 80vw;
	margin-block: 10vh;
	margin-inline: auto;

	.cards {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;

		.card {
			min-height: 25dvh;
			display: grid;
			place-content: center;
			background-color: var(--stop-color-2);
			color: #fff;
			transition: scale 200ms;

			/* 			img {
				display: block;
				object-fit: cover;
			} */

			&:hover {
				scale: 1.1;
				z-index: 1;
			}
		}
	}

	.show-more-cards {
		margin-block: 1rem;
		text-align: center;

		& label {
			display: inline-flex;
			padding: 0.75rem 1.2rem;
			cursor: pointer;
			text-transform: uppercase;
			font-weight: bold;
			background-color: #ffffff1a;
			color: #fff;
			border: 2px solid #ffffff66;
			border-radius: 0.35rem;
			transition: scale 200ms;

			&:hover {
				scale: 1.4;
			}
		}
	}
}