.card__container {
  position: relative;

  .card {
    font-family: "Crimson Text", serif;

    border-radius: 1.5rem;
    border: var(--gray-90) solid 0.125rem;
    border-bottom: var(--gray-90) solid 0.25rem;
    background-color: white;

    position: relative;
    height: 70vh;
    padding: 1rem;
    margin: 2rem;

    display: flex;
    z-index: 5;
    justify-content: center;
    align-content: center;
    flex-direction: column;

    text-align: center;
    font-size: 2rem;

    .two {
      opacity: 0;
    }

    &.revealed {
      .one {
        animation-name: reveal-one;
        animation-duration: 0.5s;
        animation-timing-function: ease-in-out;

        font-size: 1rem;
        color: var(--gray-40);
      }
      .two {
        animation-name: reveal-two;
        animation-duration: 0.5s;
        animation-timing-function: ease-in-out;
        opacity: 1;
      }
    }
  }
}

.card__container::after,
.card__container::before {
  --border-color: var(--gray-95);

  box-sizing: border-box;

  position: absolute;
  height: 70vh;
  width: calc(100% - 4rem);
  top: 0;
  left: 2rem;
  z-index: 2;
  transform: rotate(2deg);

  content: "";
  display: block;

  border-radius: 1.5rem;
  border: var(--border-color) solid 0.125rem;
  border-bottom: var(--border-color) solid 0.25rem;
  background-color: white;
}

.card__container::before {
  transform: rotate(4deg);
  --border-color: var(--gray-96);
  z-index: 1;
}

@keyframes reveal-one {
  from {
    font-size: 2rem;
    color: black;
  }

  to {
    font-size: 1rem;
    color: var(--gray-40);
  }
}

@keyframes reveal-two {
  from {
    opacity: 0;
    margin-bottom: -2rem;
  }

  to {
    opacity: 1;
    margin-bottom: 0;
  }
}