@layer group {
	#scroll {
		display: block;
		width: 100vw;
		height: 100vh;
		overflow: scroll;
		scroll-timeline: verticalTimeline vertical, horizontalTimeline horizontal;
	}

	#scroll::before {
		content: "";
		display: block;
		height: 300%;
		width: 300%;
	}

	ul {
		position: sticky;
		inset: 0;
		height: 100%;
		display: grid;
		margin: 0;
		padding: 0;
		animation-name: expandColumn, expandRow;
		animation-duration: 1ms;
		animation-timeline: horizontalTimeline, verticalTimeline;
	}

	li {
		display: grid;
		container-type: size;
		place-items: center;
		border: 1px solid currentColor;
	}

	li:nth-child(-n + 2) {
		border-top: none;
	}

	li:nth-child(2n + 1) {
		border-left: none;
	}

	li:nth-child(2n) {
		border-right: none;
	}

	li:nth-child(n + 3) {
		border-bottom: none;
	}

	@keyframes expandColumn {
		0% {
			grid-template-columns: 5fr 1fr;
		}

		100% {
			grid-template-columns: 1fr 5fr;
		}
	}

	@keyframes expandRow {
		0% {
			grid-template-rows: 5fr 1fr;
		}

		100% {
			grid-template-rows: 0.1fr 1fr;
		}
	}
}