:root {
	--bgc: #DCDCDC;
	--fgc: #121212;
	--fade-spread: min(calc(100vw / 11), 135px);
	--fade-blur: calc(var(--fade-spread) * 0.8);
}

@media screen and (prefers-color-scheme: dark) {
	:root {
		--bgc: #232323;
		--fgc: #EDEDED;
	}
}

body {
	background-color: var(--bgc);
	color: var(--fgc);
	font-size: 2rem;
}

img {
	max-width: 100%;
}

.h-center {
	margin: auto;
    text-align: center;
}

.fade-wrapper {
	justify-content: center;
	display: grid;
}

.fade-item:nth-child(1) {
	grid-row: 1 / 5; grid-column: 1;
}
.fade-item:nth-child(2) {
	grid-row: 5 / 7;
	grid-column: 1;
	z-index: 1;
	background-color: var(--bgc);
	box-shadow: 0px -10px var(--fade-blur) var(--fade-spread) var(--bgc);
}
.fade-item:nth-child(3) {
	grid-row: 7 / 10; grid-column: 1;
}