.cards-swap {
  position: relative;
  width: 100%;
  margin-bottom: 40px;

  &__card {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translate(0, -16px) scale(0.9);
    transform-origin: top;
    height: inherit;
    overflow: hidden;
    filter: contrast(0.6) brightness(1.2);
    z-index: 1;
    transition-property: transform, filter;
    transition-duration: 0.7s, 0.7s;
    transition-timing-function: cubic-bezier(0.46, -0.59, 0.4, 0.89), linear;

    &.active {
      transform: translate(0, 0) scale(1);
      filter: contrast(1) brightness(1);
      z-index: 2;
      height: auto;
      overflow: visible;
    }

    &.static {
      position: relative;
    }
  }

  &__toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 23px;
    height: 23px;
    background: $white;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: $blue-dark;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.2;
    cursor: pointer;
  }
}

@include media-breakpoint-up(sm) {
  .cards-swap {
    &__card {
      transform: translate(0, 16px) scale(0.9);
      transform-origin: bottom;
    }
  }
}