/* 页面布局（layout） */

/* 固定头部在 #smooth-wrapper 外时，为可滚动内容留出头部高度 */
#smooth-content {
  padding-top: var(--header-h);
  box-sizing: border-box;
}

.l-container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter-x);
}

.l-section {
  padding: 4.5rem 0;
}
.section-wrap {
  padding: 0 var(--p-x);
}
/* 小屏幕：手机端 范围：0-576px*/
@media (max-width: 576px) {
  :root {
    --p-x: 20px;
  }
}
/* 中屏幕：平板端 范围：576-768px*/
@media (min-width: 576px) and (max-width: 768px) {
  :root {
    --p-x: 40px;
  }
}
/*768-992px*/
@media (min-width: 768px) and (max-width: 992px) {
  :root {
    --p-x: 60px;
  }
}
/* 大屏幕：范围：>=992px*/
@media (min-width: 992px) {
  :root {
    --p-x: 12.5rem;
  }
}