:root {
	--card-height:60vw;
	--card-margin:0;
	--card-top-offset:2em;
	--outline-width:0;
}

#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:-40vh;
}

.card {  }
.card .page-text {font-size: 17px;line-height:20px;}

.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-white);
	box-shadow:0 100px 0 var(--color-white); 
}

.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; }

.card-item-left , .card-item-right { float:left; width:100%; position:relative; }
.card-item-left { padding:25px 0; }
	.card-item-right .page-title { margin-top:30px; margin-bottom:30px; }
	.card-item-right picture {float:left;width:100%;max-height: 300px;aspect-ratio:5/3;border-radius:24px;overflow:hidden;}
		.card-item-right picture img { width:100%; height:100%; object-fit:cover; }
	.card-item-no { position:absolute; left:48px; bottom:-24px; font-weight:200; font-size:160px; color:var(--color-white); line-height:100%; mix-blend-mode:overlay; }

@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: 3;
		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);
	}
}


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

#cards { margin-bottom:-28vh; }

}



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

#cards { margin-bottom:-10vh; }

}



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

:root { --card-height:120vw; --card-margin:0; }
#cards { margin-bottom:-40vh; }
.card { position:sticky; top:-15vh; }
.card-item-right picture { aspect-ratio:2/1; border-radius:16px; }

.animate-text-wrap { padding:54px 0; }
.animate-text-container.ats { font-size:40px; }
.animate-text-container.slogans { font-size:24px; letter-spacing:0; }
.animate-text span img { padding:12px; margin:0; }
.animate-text span small { padding:12px 32px; }

}



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

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

#cards { margin-bottom:-35vh; }
.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:-20vh; }

}



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

:root { --card-height:200vw; }
#cards { margin-bottom:-30vh; }

}