:root {
	--card-height: 40vw;
	--card-margin: 0;
	--card-top-offset: 2em;
	--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:-40px;
}

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

.card__content {
	border-top:2px solid var(--color-white);
	overflow: hidden;
	grid-template-areas: "text img";
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	align-items: stretch;
	background-color:var(--color-dark);
}

.block-cards { position:relative; }
.block-cards::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background-color:var(--color-black); opacity:0.5; }

.card-item { float:left; width:100%; position:relative; display:flex; }

.card-item-left { float:left; width:50%; padding-top:40px; padding-bottom:60px; padding-right:120px; position:relative; display:flex; flex-direction:column; }
	.card-item-no { float:left; width:100%; font-family:var(--font-secondary); font-size:240px; line-height:100%; }
	.card-item-left .page-text { margin-top:auto; }

.card-item-right { float:left; width:50%; }
	.card-item-right .page-title { margin-top:30px; margin-bottom:30px; }
	.card-item-right picture { float:left; width:100%; aspect-ratio:84/44; border-radius:8px; overflow:hidden; }
		.card-item-right 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) {

.card-item-left { padding-top:24px; padding-bottom:20px; padding-right:40px; }
.card-item-right picture { aspect-ratio:3/2; }

}



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

.card-item-right .page-title { margin-top:20px; margin-bottom:20px; }

}



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

:root { --card-height:50vw; --card-margin:50px; }
#cards { margin-bottom:40px; }

}



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

:root { --card-height:100vw; --card-margin:20px; --card-top-offset:1em; }

#cards { margin-bottom:0; }
.card-item { flex-direction:column; }
.card-item-left { width:100%; padding-bottom:60px; padding-right:0; order:2; }
.card-item-right { width:100%; order:1; }
.card-item-right picture { max-height:360px; aspect-ratio:7/4; }
.card-item-no { position:absolute; left:30px; top:-70px; width:auto; font-size:96px !important; }

}



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

:root { --card-height:140vw; }
#cards { margin-bottom:; }
.card-item-right .page-title { margin-top:25px; margin-bottom:25px; }

}