.cards {
    position: relative;
    list-style-type: none;
    padding: 0;
    max-width: 50em;
    /* margin: 10% auto 0; */
    margin-top: 5%;
  }
  
  .card {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    min-height: 170px;
    background: #ccc;
    border-radius: 20px;
    padding: 60px 40px;
    box-shadow: 0 0 20px rgba(0,0,0,0.10);
    transform: translateY(0) rotate(4deg) translateX(25px) scale(1);
    transform-origin: 0 0;
  
    transition: transform 0.6s cubic-bezier(0.8, 0.2, 0.1, 0.8) 0.1s, background 0.4s linear;
  
    cursor: pointer;
    user-select: none;

    min-width: 50em;
    max-width: 51em;
  
    /* :last-child {
      margin-bottom: 0;
    } */
  }
  
  .card--next {
    z-index: 5;
    transform: translateY(-15px) rotate(2deg) translateX(25px) scale(1);
  }
  
  .card--out {
    animation: card-out 0.6s cubic-bezier(0.8, 0.2, 0.1, 0.8);
    transform: translateY(-20px) rotate(4deg) translateX(55px) scale(0.95);
    z-index: 1;
    background: #bbb;
  }
  
  @keyframes card-out {
    0% {
      z-index: 20;
      transform: translateY(0px) rotate(-4deg) scale(1);
    }
    50% {
      transform: translateY(-120%) rotate(-5deg) translateX(-40px);
    }
    80% {
      z-index: 1;
    }
    100% {
      transform: translateY(-50px) rotate(8deg) translateX(55px) scale(0.95);
    }
  }
  
  .card--current {
    cursor: auto;
    user-select: auto;
    position: relative;
    z-index: 10;
    opacity: 1;
    background: #fff;
    transform: rotate(-0.5deg) translateX(0%) scale(1);
  }

  .cards .number {
    font-size: 3em;
    font-family: 'Carisma Classic 500';
  }

  .cards .txt-card {
    font-size: 1.8em;
    letter-spacing: 0.05em;
  }