@charset "UTF-8";
/**** Stacking Cards : start ****/
:root {
	--card-height: 40vw;
	--card-margin: 4vw;
	--card-top-offset: 1em;
	--numcards: 7;
	--outline-width: 0px;
  }

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

  #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_7 {--index: 7;}
  .card {position: sticky;top: 0;padding-top: calc(var(--index) * var(--card-top-offset));}

  @supports (animation-timeline: works) {

	@scroll-timeline cards-element-scrolls-in-body {
      source: selector(body);
      scroll-offsets:
      	/* Start when the start edge touches the top of the scrollport */
      	selector(#cards) start 1,
      	/* End when the start edge touches the start of the scrollport */
      	selector(#cards) start 0
      ;
      start: selector(#cards) start 1; /* Start when the start edge touches the top of the scrollport */
      end: selector(#cards) start 0; /* End when the start edge touches the start of the scrollport */
      time-range: 4s;
	}

  .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 */
	}
	
  .card__content {
  	transform-origin: 50% 0%;
  	will-change: transform;
  
  	--duration: calc(var(--reverse-index0) * 1s);
  	--delay: calc(var(--index0) * 1s);
  
  	animation: var(--duration) linear scale var(--delay) forwards;
  	animation-timeline: cards-element-scrolls-in-body;
  }
  
  @keyframes scale {
  	to {
  	  transform:
  	    scale(calc(
  		  1.1
  		  -
  		  calc(0.1 * var(--reverse-index))
  		));
   	  }
    }
  }

  /** PAGE STYLING **/
  #cards {list-style: none;margin:0 0 0 0;padding: 0px;width:100%;}
  
  .card {margin-bottom:0px;}
  
  .card__content {box-shadow:0 0em 0em rgba(0, 0, 0, 0.1), 0 0em 3em rgba(0, 0, 0, 0.1);background: rgb(255, 255, 255);color: rgb(10, 5, 7);border-radius: 30px;overflow: hidden;}
  /*box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.1), 0 1em 2em rgba(0, 0, 0, 0.1);*/
  .card__content > div {grid-area: text;width: 80%;place-self: center;text-align: left;display: grid;gap: 1em;place-items: start;}
  .card__content > figure {grid-area: img;overflow: hidden;margin-inline-start: 0px;margin-inline-end: 0;margin-block-start: 0px;margin-block-end: 0px;}
  .card__content > figure > img {width: 100%;height: 100%;object-fit: cover;}
  
/**** Stacking Cards : end ****/