:root {
	--card-height:40vw;
	--card-margin:0;
	--card-top-offset:20px;
	--outline-width:0px;
}

#cards {
	/* Make place at bottom, as items will slide to that position*/
	padding-bottom: calc(var(--numcards) * var(--card-top-offset));
	/* Don't include the --card-margin in padding, as that will affect the scroll-timeline*/
	margin-bottom: var(--card-margin);
	width:100%;
}

#card_1 { --index: 1; }
#card_2 { --index: 2; }
#card_3 { --index: 3; }
#card_4 { --index: 4; }
#card_5 { --index: 5; }
#card_6 { --index: 6; }

.card { position:sticky; top:80px; padding-top:calc(var(--index) * var(--card-top-offset)); }
.card__content { transform-origin:50% 0%; will-change: transform; }

/** PAGE STYLING **/

#cards {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(var(--numcards), var(--card-height));
	gap: var(--card-margin);
	margin-bottom:-20vh;
}

.card {
	outline: var(--outline-width) solid lime;
}

.card__content {
	overflow: hidden;
	grid-template-areas: "text img";
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	align-items: stretch;
	background-color:var(--color-light);
	border-radius:32px;
	box-shadow:0 -2px 0 var(--color-light);
}

.block-cards { position:relative; }

.card-item { float:left; width:100%; padding:40px; position:relative; display:flex; flex-direction:column; background-color:var(--color-brown); color:var(--color-white); text-align:center; border-radius:32px; gap:21px; }
	
	.card-item-year { float:left; width:100%; display:flex; justify-content:center; }
		.card-item-year small { padding:10px 50px; background-color:var(--color-orange); font-size:24px; font-weight:700; line-height:30px; border-radius:25px; }
	
	.card-item-title { float:left; width:100%; display:flex; justify-content:center; }
		.card-item-title .page-title { width:auto; }
			.card-item-title .page-title-in::before , .card-item-title .page-title-in::after { max-width:60px; }
	
	.card-item-photo { float:left; width:100%; }
		.card-item-photo picture { float:left; width:100%; max-height:320px; position:relative; aspect-ratio:7/4; border-radius:32px; overflow:hidden; }
			.card-item-photo picture img { width:100%; height:100%; object-fit:cover; }
			.card-item-photo picture img { width:100%; height:100%; object-fit:cover; }
	

@supports (animation-timeline: view()) {
	
	.card {
		--index0: calc(var(--index) - 1); /* 0-based index */
		--reverse-index: calc(var(--numcards) - var(--index0)); /* reverse index */
		--reverse-index0: calc(var(--reverse-index) - 1); /* 0-based reverse index */
	}

	@keyframes scale {
		to {
			transform:
				scale(calc(1.1 - calc(0.1 * var(--reverse-index))));
		}
	}

	#cards {
		--numcards: 6;
		view-timeline-name: --cards-element-scrolls-in-body;
	}

	.card__content {
		--start-range: calc(var(--index0) / var(--numcards) * 100%);
		--end-range: calc((var(--index)) / var(--numcards) * 100%);

		animation: linear scale forwards;
		animation-timeline: --cards-element-scrolls-in-body;
		animation-range: exit-crossing var(--start-range) exit-crossing var(--end-range);
	}
}

.bg-text-wrap { position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden; font-size:200px; font-weight:900; color:#FFF; line-height:100%; transform:skewY(-4deg); z-index:-999; display:flex; align-items:center; }
.bg-text-container { transform:translateX(-50%); left:50%; position:absolute; width:100%; }
.animate-text span { text-transform:uppercase; display:inline-block; min-width:auto; }


@media only screen and (max-width:1560px) {

#cards { margin-bottom:0; }

}



@media only screen and (max-width:1200px) {

.card-item { padding:30px; border-radius:24px; gap:16px; }
.card-item-year small { padding:5px 40px; font-size:20px; }

}



@media only screen and (max-width:1023px) {

:root { --card-height:70vw; --card-margin:0; }

}



@media only screen and (max-width:767px) {

:root { --card-top-offset:1em; margin-bottom:-20vh; }
#cards { margin-bottom:-40vh; }

}



@media only screen and (max-width:540px) {

:root { --card-height:100vw; }
#cards { margin-bottom:-10vh; }
.card-item-title .page-title-in::before, .card-item-title .page-title-in::after { display:none; }

}