/* s-grid-001: 特徴グリッド */

.s-grid-001 {
  padding-top: var(--wp--preset--spacing--2-xl);
  padding-bottom: var(--wp--preset--spacing--2-xl);
}

.s-grid-001__title {
  text-align: center;
  font-size: var(--wp--preset--font-size--2-xl);
  margin-bottom: var(--wp--preset--spacing--xs);
}

.s-grid-001__description {
  text-align: center;
  margin-bottom: var(--wp--preset--spacing--xl);
}

/* ══════════════════════════════════════════════════
   背景
   ══════════════════════════════════════════════════ */

/** @element root  @group 背景  @label グレー  @order 1 */
.s-grid-001--bg-gray {
  background-color: var(--wp--preset--color--gray-lightest);
}

/** @element root  @group 背景  @label ダーク  @order 2 */
.s-grid-001--bg-dark {
  background-color: var(--wp--preset--color--gray-darkest);
  color: var(--wp--preset--color--white);
}

/* ══════════════════════════════════════════════════
   カラム数
   ══════════════════════════════════════════════════ */

/** @element root  @group カラム数  @label 2カラム  @order 1 */
.s-grid-001--col-2 .s-grid-001__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

/** @element root  @group カラム数  @label 4カラム  @order 2 */
.s-grid-001--col-4 .s-grid-001__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* ══════════════════════════════════════════════════
   間隔
   ══════════════════════════════════════════════════ */

/** @element root  @group 間隔  @label 狭い  @order 1 */
.s-grid-001--gap-narrow .s-grid-001__grid {
  gap: var(--wp--preset--spacing--sm);
}

/** @element root  @group 間隔  @label 広い  @order 2 */
.s-grid-001--gap-wide .s-grid-001__grid {
  gap: var(--wp--preset--spacing--xl);
}

/* ══════════════════════════════════════════════════
   見出し配置
   ══════════════════════════════════════════════════ */

/** @element root  @group 見出し配置  @label 左寄せ  @order 1 */
.s-grid-001--title-left .s-grid-001__title,
.s-grid-001--title-left .s-grid-001__description {
  text-align: left;
}