/***********************************
 * 容器 / 通用布局与网格
 ***********************************/
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px; /* 水平留白可以先保留固定值，不影响整体 spacing 系统 */
}

/* 通用区块上下间距：统一成 spacing scale */
section {
  margin: var(--space-2xl) 0; /* 原 34px ≈ 32px，这里用 40px 稍微更大一点点 */
}

/* 通用双列布局 */
.grid {
  display: grid;
  gap: var(--space-md); /* 原 16px */
  grid-template-columns: 2fr 1fr;
}

/* 通用卡片栅格 */
.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md); /* 原 16px */
}

.cols-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md); /* 原 16px */
}

/***********************************
 * 响应式：平板及以下
 ***********************************/
@media (max-width: 900px) {
  .grid {
    grid-template-columns: 1fr;
  }

  .cols-3,
  .cols-2 {
    grid-template-columns: 1fr;
  }
}