@media (min-width: 320px) {
    :root {
        --card-height: 100vh;
        --card-margin: 4vw;
        --card-top-offset: 1em;
        --outline-width: 0px;
    }
    .card-stack-container {
        display: grid;
        grid-template-columns:1fr;
        gap: var(--card-margin);
        grid-template-rows: repeat(var(--numcards), var(--card-height));
        padding-bottom: calc(var(--numcards) * var(--card-top-offset));
        margin-bottom: var(--card-margin);
        
    }
    .card-stack-item{
        position: sticky;
        top: 0;
        /* These variables (index, numcards, z-index) are set dynamically via JS */
        padding-top: calc(var(--index) * var(--card-top-offset));
    }
    .card-stack-item-content{
      background-color: #ffffff;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    }
    .text-stack-container .card-stack-item-content{
      background-color: transparent;
      box-shadow: none;
      padding:0px;
    }
    .card-stack-item-content img{
      object-fit: cover;
      height:200px;
    }
  
    
}

@media (min-width: 768px) {

}

@media (min-width: 990px) {
  .card-stack-item-content img, .is-root-container .card-stack-item-content img{
    height:400px;
}

@media (min-width: 1280px) {

}

/* --- Animation --- */
@supports (animation-timeline: works) {

    /* Scroll timeline */
    @scroll-timeline cards-element-scrolls-in-body {
      source: selector(body);
      scroll-offsets:
        selector(.card-stack-container) start 1,
        selector(.card-stack-container) start 0;
      start: selector(.card-stack-container) start 1;
      end: selector(.card-stack-container) start 0;
      time-range: 4s;
    }
  
    /* Card-specific variables, based on JS-assigned --index and --numcards */
    .card-stack-item {
      --index0: calc(var(--index) - 1);
      --reverse-index: calc(var(--numcards) - var(--index0));
      --reverse-index0: calc(var(--reverse-index) - 1);
    }
  
    /* Animated scaling */
    .card-stack-item-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))));
      }
    }
  }