.plan-card {
  display: block;
  height: 100%;
  width: 100%;

  .title {
    margin: 10px 0;
    font-size: 1.6rem;
    text-transform: uppercase;
  }

  .content {
    & {
      padding: 15px 0;
      background-color: #f5f5f5;
    }

    .wrap, .wrap-monthly {
      width: 130px;
      height: 130px;
      display: inline-block;
      background: white;

      @include border-radius(50%, 50%, 50%, 50%);

      border: 3px solid;

      .price {
        width: 114px;
        display: flex;
        flex-direction: column;
        justify-content: center;

        @include border-radius(50%, 50%, 50%, 50%);
      }
    }

    .wrap-monthly {
      & > .price {
        & > .amount {
          padding-top: 4px;
          line-height: 1.2em;
        }

        & > .period {
          padding-top: 4px;
        }
      }
    }
    .price {
      position: relative;
      top: 5px;
      left: 5px;
      height: 114px;
      background-color: black;

      .amount {
        padding-left: 4px;
        padding-right: 4px;
        font-weight: bold;
        font-size: rem-calc(17);
        color: white;
      }

      .period {
        position: relative;
        top: -6px;
        font-size: rem-calc(14);
        color: white;
      }
    }
  }

  .card-footer {
    .plan-description {

      & p:nth-child(2n+3), p:nth-child(2n+4) {
        display: none;
      }
    }
    .cta-button {
      margin: 20px 0;

      .subscribe-button {
        @extend .btn;
        @extend .rounded;
        outline: 0;
        font-weight: 600;
        font-size: rem-calc(16);
        background-color: white;
        padding-left: 30px;
        padding-right: 30px;
      }
      button.subscribe-button:focus, button.subscribe-button:hover {
        outline: 0;
      }
    }
    .info-link {
      margin-top: 1em;
    }
  }
}
