@use '../../base/variable';
@use '../../base/token';
@use '../../abstract';

.cds-section-wrap.cds-modal-box {
  width: min(343px, 100%);

  @include abstract.media-bp-up('md') {
    width: min(640px, 100%);
  }

  @include abstract.media-bp-up('ex') {
    width: min(640px, 100%);
  }
}

.cds-featured-cards-04 {
  $header-section: 'cds-header-section';
  $modal: 'cds-modal';

  // @include abstract.debug();
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;

  &__content {
    width: max(375px, 100%);
    padding: 0 16px;
  }

  &__content {
    // @include abstract.debug(green);
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  &__features {
    // @include abstract.debug(orange);
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: max(343px, 100%);
  }

  &__pricing-tier-card {
    // @include abstract.debug(orange);
    width: max(343px, 100%);
  }

  .#{$modal}__box {
    width: min(343px, 100%);
  }

  @include abstract.media-bp-up('md') {
    gap: 64px;

    &__header,
    &__content {
      width: min(variable.$max-width, 100%);
      padding: 0 32px;
    }

    &__header {
      header {
        margin-bottom: 20px;
      }

      .#{$header-section}__header {
        font-size: token.$font-size-7;
        line-height: token.$line-heights-3 + px;
      }
    }

    &__content {
      flex-direction: row;
      gap: 96px;
    }

    &__features {
      gap: 48px;
      width: min(544px, 100%);
      margin-top: auto;
      margin-bottom: auto;
    }

    &__pricing-tier-card {
      width: 576px;
    }

    .#{$modal}__box {
      width: 100%;
    }
  }
}