card_01

// =====================================================================================
//
// card_01
//
// =====================================================================================

@use 'sass:math';
@use 'scss/global' as g;

// -------------------------------------------------------------------------------------
// 変数
// -------------------------------------------------------------------------------------

// 最大4列でレイアウトするか（0=PC3列、Tablet2列、SP1列 / 1=PC4列、Tablet3列、SP2列）
$four_columns: 1;

// カード単体のボーダースタイル（なしの場合はnoneに設定）
$border: 1px solid g.$color_border;

// カード間の余白
$gutter_sp: math.div(16, g.strip_unit(g.$width_base_sp)) * 100%;
$gutter_tablet: math.div(32, g.strip_unit(g.$width_base_tablet)) * 100%;
$gutter_pc: math.div(40, g.strip_unit(g.$width_max)) * 100%;

// -------------------------------------------------------------------------------------
// コンテナ
// -------------------------------------------------------------------------------------
.card_01--container {
  @include g.holder();

  display: flex;
  flex-wrap: wrap;
}

// -------------------------------------------------------------------------------------
// カード単体
// -------------------------------------------------------------------------------------
.card_01 {
  display: flex;
  flex-direction: column;
  background: #fff;

  @if $four_columns == 1 {
    @include g.mq(sp) {
      width: calc((100% - #{g.floor_decimal($gutter_sp)}) / 2);
      margin: 0 #{g.floor_decimal($gutter_sp)} #{g.floor_decimal($gutter_sp)} 0;

      &:nth-child(2n) {
        margin-right: 0;
      }
    }

    @include g.mq(tablet) {
      width: calc((100% - #{g.floor_decimal($gutter_tablet * 2)}) / 3);
      margin: 0 #{g.floor_decimal($gutter_tablet)} #{g.floor_decimal(
          $gutter_tablet
        )} 0;

      &:nth-child(3n) {
        margin-right: 0;
      }
    }

    @include g.mq(pc) {
      width: calc((100% - #{g.floor_decimal($gutter_pc * 3)}) / 4);
      margin: 0 #{g.floor_decimal($gutter_pc)} #{g.floor_decimal($gutter_pc)} 0;

      &:nth-child(4n) {
        margin-right: 0;
      }
    }
  } @else {
    @include g.mq(sp) {
      width: 100%;
      margin: 0 0 #{g.floor_decimal($gutter_sp)};
    }

    @include g.mq(tablet) {
      width: calc((100% - #{g.floor_decimal($gutter_tablet)}) / 2);
      margin: 0 #{g.floor_decimal($gutter_tablet)} #{g.floor_decimal(
          $gutter_tablet
        )} 0;

      &:nth-child(2n) {
        margin-right: 0;
      }
    }

    @include g.mq(pc) {
      width: calc((100% - #{g.floor_decimal($gutter_pc * 2)}) / 3);
      margin: 0 #{g.floor_decimal($gutter_pc)} #{g.floor_decimal($gutter_pc)} 0;

      &:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
}

// -------------------------------------------------------------------------------------
// 画像の外枠
// -------------------------------------------------------------------------------------
.card_01--image {
  img {
    display: block;
    width: 100%;
  }
}

// -------------------------------------------------------------------------------------
// テキストの外枠（並列するカードに合わせて高さが可変する）
// -------------------------------------------------------------------------------------
.card_01--body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 16px 16px 24px;
  border: $border;
  border-top: none;
}

// -------------------------------------------------------------------------------------
// サブ情報（投稿日時などが入る想定）
// -------------------------------------------------------------------------------------
.card_01--sub {
  margin: 0 0 8px;
  font-size: g.$font_size_s;
  color: #999;
}

// -------------------------------------------------------------------------------------
// メイン情報（記事タイトルや説明文などが入る想定。並列するカードに合わせて高さが可変する）
// -------------------------------------------------------------------------------------
.card_01--text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 0 0 16px;
}

// -------------------------------------------------------------------------------------
// ボタンの外枠
// -------------------------------------------------------------------------------------
.card_01--btn_box {
  text-align: center;
}