.c-plan-card {
  border-radius: 8px;
    box-shadow: $box-shadow-card-lvl-2;
    margin-bottom: 50px;
    max-width: 260px;
    text-align: center;
    width: 100%;

    @include element('title') {
      margin-bottom: 4px;
      padding: 18px 12px;

      h2 {
        @include use-font('body-alt', 'bold');
        margin: 0;
        text-transform: uppercase;
      }
    }

    @include element('info') {
      color: use-color('grey', 'light');
      font-weight: 400;
      margin-bottom: 8px;
      padding: 0 12px;

      p {
        @include use-font('body-alt', 'regular');
        margin: 0;
      }
    }

    @include element('plan-info') {
      color: use-color('primary', 'base');
      margin-bottom: 12px;
      padding: 0 12px;

      h3 {
        @include use-font('body-alt', 'bold');
        margin: 0;
        text-transform: uppercase;
      }
    }

    @include element('img-wrapper') {
      margin-bottom: 32px;
      padding: 0 12px;

      img {
        height: 56px;
      }
    }

    @include element('btn-wrapper') {
      background-color: use-color('grey', 'light-alt-i');
      padding: 28px 0;

      input {
        @include use-font('body-alt', 'regular');
        border: 1px solid use-color('secondary', 'base');
        border-radius: 8px;
        color: use-color('secondary', 'base');
        cursor: pointer;
        padding: 10px 20px;
      }
    }
}

.c-modal {
  @include modifier('campaign-list') {
    // height: 468px;
    height: fit-content;
    
    // overrides
    .c-modal {
      @include element('content') {
        display: contents;
        height: 90%;
      }
    }
  }
}