@media ( max-width: 1199px ) {

  .stack {
    position: relative !important;
    display: block !important;
    gap: 0 !important;
    margin-top: 25vw !important;
    margin-bottom: 35vw !important;
  }

  .card {
    position: absolute !important;
    transform: translate(-50%, -50%) !important;
    top: 50% !important;
    left: 50% !important;
    width: 100% !important;
    height: clamp( 420px, 110vw, 560px ) !important;
    margin: 0 !important;
    /* border-radius: 2rem !important; */
    /* box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25),
      0 15px 20px 0 rgba(0, 0, 0, 0.125) !important; */
    user-select: none !important;
    /* overflow: hidden !important ; */
    /* touch-action: none !important; */
    /* pointer-events: none !important; */
  }

  .card > * {
    transition: transform 0.6s !important;
  }

  .card:last-child {
    touch-action: auto !important;
    pointer-events: auto !important;
  }
/* 
  .card , .card * {
    pointer-events: none !important;
  }
 */
  .card a , .card button {
    pointer-events: all !important;
  }

  .card:nth-last-child(3) > * {
    --x: -50%;
    /* transform: translate(var(--x), -80% ) scale(0.88) !important;
    transform: translate(var(--x), calc( -50% - 21vw ) ) scale(0.88) !important;
    transform: translate(var(--x), calc( -50% - 21cqw ) ) scale(0.88) !important; */
    transform: translate( 0%, -21cqw ) scale(0.88) !important;
  }

  .card:nth-last-child(2) > * {
    --x: -50%;
    /* transform: translate(var(--x), -65% ) scale(0.94) !important;
    transform: translate(var(--x), calc( -50% - 10.5vw ) ) scale(0.94) !important;
    transform: translate(var(--x), calc( -50% - 10.5cqw ) ) scale(0.94) !important; */
    transform: translate( 0%, -10.5cqw ) scale(0.94) !important;
  }

  .card:nth-last-child(1) > * {
    --x: -50%;
    /* transform: translate(var(--x), -50% ) scale(1) !important; */
    transform: translate( 0%, 0% ) scale(1) !important;
  }

  .card:nth-last-child(1) img {
    box-shadow: 0 1px 5px 5px rgba(255, 193, 111, 0.5) !important;
  }

  .card.swap {
    animation: swap 1.3s ease-out 0s !important;
  }

  @keyframes swap {
    0% {
      transform: translate( 0%, 0% ) scale(1) rotate( 0deg ) rotateY(0deg) !important;
    }

    30% {
      transform: translate( 0%, -150px ) scale(0.85) rotate( -5deg ) rotateY(65deg) !important;
    }

    100% {
      transform: translate( 0%, -30px ) scale(0.5) !important;
      z-index: -1 !important;
    }
  }

  .stack {
    grid-area: stacked !important;
  }

}
/* 
@media (max-width: 1200px) {
  @keyframes swap {
    30% {
      transform: translate(calc(0% - 200px), -50%) scale(0.85)
        rotate(-5deg) rotateY(65deg);
    }

    100% {
      transform: translate(calc(0% - 30px), -50%) scale(0.5);
      z-index: -1;
    }
  }
}
 */
 
@media (max-width: 1050px) {
  @keyframes swap {
    30% {
      transform: translate( 0%, -150px) scale(0.85) rotate(-5deg) rotateY(65deg) !important;
    }

    100% {
      transform: translate( 0%, -30px) scale(0.5) !important;
      z-index: -1 !;
    }
  }
}

@media ( max-width: 767px ) {

  .stack {
    margin-top: 35vw !important;
    margin-bottom: 50vw !important;
  }

  .card:nth-last-child(3) > * {
    --x: -50%;
    transform: translate(var(--x), -80% ) scale(0.88) !important;
    transform: translate(var(--x), calc( -50% - 25vw ) ) scale(0.88) !important;
    transform: translate(var(--x), calc( -50% - 25cqw ) ) scale(0.88) !important;
    transform: translate( 0%, -25cqw ) scale(0.88) !important;
  }

  .card:nth-last-child(2) > * {
    --x: -50%;
    transform: translate(var(--x), -65% ) scale(0.94) !important;
    transform: translate(var(--x), calc( -50% - 12.5vw ) ) scale(0.94) !important;
    transform: translate(var(--x), calc( -50% - 12.5cqw ) ) scale(0.94) !important;
    transform: translate(0%, -12.5cqw ) scale(0.94) !important;
  }
}

@media ( max-width: 599px ) {

  .stack {
    margin-top: 40vw !important;
    margin-bottom: 57.5vw !important;
  }

  .card:nth-last-child(3) > * {
    --x: -50%;
    transform: translate(var(--x), -80% ) scale(0.88) !important;
    transform: translate(var(--x), calc( -50% - 30vw ) ) scale(0.88) !important;
    transform: translate(var(--x), calc( -50% - 30cqw ) ) scale(0.88) !important;
    transform: translate(0%, -30cqw ) scale(0.88) !important;
  }

  .card:nth-last-child(2) > * {
    --x: -50%;
    transform: translate(var(--x), -65% ) scale(0.94) !important;
    transform: translate(var(--x), calc( -50% - 15vw ) ) scale(0.94) !important;
    transform: translate(var(--x), calc( -50% - 15cqw ) ) scale(0.94) !important;
    transform: translate(0%, -15cqw ) scale(0.94) !important;
  }
}

@media (max-width: 479px) {

  .stack {
    margin-top: 45vw !important;
    margin-bottom: 75vw !important;
  }
}