@use 'sass:math';
@use '../../base/variable';
@use '../../abstract';
@use '../../components/card';

.cds-card-section {
  $this: &;
  --column-count: 2;
  padding-inline: variable.$gap-sm;
  width: min(100%, variable.$max-width);

  &__contents {
    display: grid;
  }

  .cds-header-section__header {
    font-size: var(--font-size-6);
    line-height: math.div(38, 30);
  }

  .cds-header-section__text {
    font-size: var(--font-size-3);
    line-height: var(--line-height-7);
    color: var(--gray-400);
  }

  // 카드 영역
  // ==========================================
  &__card-wrap {
    display: grid;
    gap: 48px;
  }

  .cds-card {
    width: auto;
  }

  .cds-card__opt-buttons {
    display: flex;
    gap: 8px;

    .cds-btn {
      width: 100%;
    }
  }

  @include abstract.media-bp-up('md') {
    padding-inline: variable.$gap-sm * 2;
    margin-inline: auto;

    // header, content 감싸는 wrap
    // ==========================================
    &.has-heading #{$this}__contents {
      $container-width: variable.$max-width - variable.$gap-sm * 4;
      $header-width: math.div(352px, $container-width) * 100%;

      grid-template-columns: $header-width 1fr;
      gap: 64px;
      container-type: inline-size;
      container-name: cards;
    }

    // header section
    // ==========================================
    &__header {
      padding-block-start: 0;

      .cds-header-section__header {
        font-size: var(--font-size-7);
        line-height: math.div(46, 36);
      }
    }

    // 카드 영역
    // ==========================================
    &__card-wrap {
      grid-template-columns: repeat(var(--column-count), 1fr);
      gap: 64px 32px;

      @container cards (max-width: 900px) {
        grid-template-columns: 1fr;
      }
    }

    .cds-card__opt-buttons {
      flex-direction: row;

      .cds-btn {
        width: auto;
      }
    }
  }
}