.stacked-cards {
  --stacked-cards-stack-top: 100px;
  --stacked-cards-stack-step: clamp(1rem, 3vw, 1rem);
  --stacked-cards-card-gap: clamp(1rem, 2vw, 1rem);
  position: relative;
}

.stacked-cards__cards {
  display: grid;
  gap: var(--stacked-cards-card-gap);
}

.stacked-cards__card {
  --card-index: 0;
  position: relative;
  z-index: calc(var(--card-index) + 1);
}

.stacked-cards__card > *:first-child {
  margin-top: 0;
}

.stacked-cards__card > *:last-child {
  margin-bottom: 0;
}

.stacked-cards--editor-preview .stacked-cards__cards > .block-list-appender {
  margin-top: 0.5rem;
}

.stacked-cards--editor-preview .stacked-cards__card {
  position: relative !important;
  top: auto !important;
  transform: none !important;
  animation: none !important;
  z-index: auto;
  will-change: auto;
}

.stacked-cards--editor-preview .stacked-cards__card > .block-editor-inner-blocks {
  display: contents;
}

.stacked-cards--editor-preview
  .stacked-cards__card
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  display: contents;
  min-height: inherit;
  background: transparent !important;
}

.stacked-cards--editor-preview
  .stacked-cards__card
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout
  > *:first-child {
  margin-top: 0;
}

.stacked-cards--editor-preview
  .stacked-cards__card
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout
  > *:last-child {
  margin-bottom: 0;
}

@media (min-width: 782px) {
  .stacked-cards--stack-desktop .stacked-cards__card {
    position: sticky;
    top: calc(
      var(--stacked-cards-stack-top) +
        (var(--card-index) * var(--stacked-cards-stack-step))
    );
  }
}

@media (max-width: 781px) {
  .stacked-cards--stack-mobile .stacked-cards__card {
    position: sticky;
    top: calc(
      var(--stacked-cards-stack-top) +
        (var(--card-index) * var(--stacked-cards-stack-step))
    );
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .stacked-cards--stack-desktop .stacked-cards__card,
    .stacked-cards--stack-mobile .stacked-cards__card {
      animation-name: stacked-cards-stack;
      animation-duration: 1s;
      animation-fill-mode: both;
      animation-timing-function: linear;
      animation-timeline: view(block);
      animation-range: entry 0% cover 45%;
      transform-origin: 50% 15%;
      will-change: transform;
    }
  }
}

@keyframes stacked-cards-stack {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    transform: translate3d(0, -2.5rem, 0) scale(0.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stacked-cards__card {
    animation: none !important;
    transition: none !important;
  }
}