:root {
  --layout-padding: 60px;
  --layout-maxWidth: 1680px;
  /* 内容间距 */
  --layout-itemMargin: 24px;
  /* 一行几个 */
  --layout-rowNumer: 4;
  /* 合并单元格 */
  --layout-grid-column: 1/3;
  --layout-grid-row: 1/3;

  /* 设计稿宽度(一般为1920px) */
  --designWidth: 1920;
  font-size: calc(100vw / var(--designWidth));
}

/* -------------- 字体适配 -------------- */
@media screen and (max-width: 2560px) {
  :root { font-size: 1px !important;}
}

@media screen and (max-width: 1440.1px) {
  :root { font-size: 0.85px !important;}
}

@media screen and (max-width: 1200.1px) {
  :root { font-size: 0.78px !important;}
}

@media screen and (max-width: 992.1px) {
  :root { font-size: 0.7px !important;}
}

@media screen and (max-width: 768.1px) {
  :root { font-size: 0.58px !important;}
}

@media screen and (max-width: 414.1px) {
  :root { font-size: 0.58px !important;}
}

@media screen and (min-width: 2560px) {
  :root { font-size: 1.16px !important;}
}

/* -------------- 栅格适配 -------------- */
@media screen and (max-width: 414.9px) {
  .col-xs-12 { --layout-rowNumer: 12;}
  .col-xs-11 { --layout-rowNumer: 11;}
  .col-xs-10 { --layout-rowNumer: 10;}
  .col-xs-9 { --layout-rowNumer: 9;}
  .col-xs-8 { --layout-rowNumer: 8;}
  .col-xs-7 { --layout-rowNumer: 7;}
  .col-xs-6 { --layout-rowNumer: 6;}
  .col-xs-5 { --layout-rowNumer: 5;}
  .col-xs-4 { --layout-rowNumer: 4;}
  .col-xs-3 { --layout-rowNumer: 3;}
  .col-xs-2 { --layout-rowNumer: 2;}
  .col-xs-1 { --layout-rowNumer: 1;}
}

@media (min-width: 414.9px) and (max-width: 991.9px) {
  .col-sm-12 { --layout-rowNumer: 12;}
  .col-sm-11 { --layout-rowNumer: 11;}
  .col-sm-10 { --layout-rowNumer: 10;}
  .col-sm-9 { --layout-rowNumer: 9;}
  .col-sm-8 { --layout-rowNumer: 8;}
  .col-sm-7 { --layout-rowNumer: 7;}
  .col-sm-6 { --layout-rowNumer: 6;}
  .col-sm-5 { --layout-rowNumer: 5;}
  .col-sm-4 { --layout-rowNumer: 4;}
  .col-sm-3 { --layout-rowNumer: 3;}
  .col-sm-2 { --layout-rowNumer: 2;}
  .col-sm-1 { --layout-rowNumer: 1;}
}

@media (min-width: 992px) and (max-width: 1199.9px) {
  .col-md-12 { --layout-rowNumer: 12;}
  .col-md-11 { --layout-rowNumer: 11;}
  .col-md-10 { --layout-rowNumer: 10;}
  .col-md-9 { --layout-rowNumer: 9;}
  .col-md-8 { --layout-rowNumer: 8;}
  .col-md-7 { --layout-rowNumer: 7;}
  .col-md-6 { --layout-rowNumer: 6;}
  .col-md-5 { --layout-rowNumer: 5;}
  .col-md-4 { --layout-rowNumer: 4;}
  .col-md-3 { --layout-rowNumer: 3;}
  .col-md-2 { --layout-rowNumer: 2;}
  .col-md-1 { --layout-rowNumer: 1;}
}

@media (min-width: 1200px) and (max-width: 1439.9px) {
  .col-lg-12 { --layout-rowNumer: 12;}
  .col-lg-11 { --layout-rowNumer: 11;}
  .col-lg-10 { --layout-rowNumer: 10;}
  .col-lg-9 { --layout-rowNumer: 9;}
  .col-lg-8 { --layout-rowNumer: 8;}
  .col-lg-7 { --layout-rowNumer: 7;}
  .col-lg-6 { --layout-rowNumer: 6;}
  .col-lg-5 { --layout-rowNumer: 5;}
  .col-lg-4 { --layout-rowNumer: 4;}
  .col-lg-3 { --layout-rowNumer: 3;}
  .col-lg-2 { --layout-rowNumer: 2;}
  .col-lg-1 { --layout-rowNumer: 1;}
}

@media (min-width: 1440px) {
  .col-xl-12 { --layout-rowNumer: 12;}
  .col-xl-11 { --layout-rowNumer: 11;}
  .col-xl-10 { --layout-rowNumer: 10;}
  .col-xl-9 { --layout-rowNumer: 9;}
  .col-xl-8 { --layout-rowNumer: 8;}
  .col-xl-7 { --layout-rowNumer: 7;}
  .col-xl-6 { --layout-rowNumer: 6;}
  .col-xl-5 { --layout-rowNumer: 5;}
  .col-xl-4 { --layout-rowNumer: 4;}
  .col-xl-3 { --layout-rowNumer: 3;}
  .col-xl-2 { --layout-rowNumer: 2;}
  .col-xl-1 { --layout-rowNumer: 1;}
}

/* -------------- 内容两侧留白适配  -------------- */
@media screen and (max-width: 414.9px) {
  :root { --layout-padding: 12px; --layout-maxWidth: 382px;}
}

@media screen and (min-width: 414.9px) {
  :root { --layout-padding: 16px; --layout-maxWidth: 382px;}
}

@media screen and (min-width: 768px) {
  :root { --layout-padding: 36px; --layout-maxWidth: 696px;}
}

@media screen and (min-width: 992px) {
  :root { --layout-padding: 28px; --layout-maxWidth: 1128px;}
}

@media screen and (min-width: 1200px) {
  :root { --layout-padding: 108px; --layout-maxWidth: 1224px;}
}

@media screen and (min-width: 1440px) {
  :root { --layout-padding: 120px; --layout-maxWidth: 1440px;}
}

@media screen and (min-width: 1680px) {
  :root { --layout-padding: 240px; --layout-maxWidth: 1440px;}
}

@media screen and (min-width: 1920px) {
  :root { --layout-padding: 240px; --layout-maxWidth: 1680px;}

  .flex--grid--layout {
    max-width: calc(var(--layout-maxWidth) + 2 * var(--layout-padding));
  }
}

@media screen and (min-width: 2560px) {
  :root { --layout-maxWidth: 1680px;}
}

/* 内容外壳 */
.flex--grid--layout {
  padding: 0 var(--layout-padding);
  margin: 0 auto;
}

/* 栅格布局，等比分 */
.flex--grid--main {
  display: grid;
  grid-column: span var(--layout-rowNumer);
  grid-gap: var(--layout-itemMargin);
  grid-template-columns: repeat(var(--layout-rowNumer), 1fr);
}

/* 合并栅格 */
.flex--grid-rowCol {
  grid-column: var(--layout-grid-column);
  grid-row: var(--layout-grid-row);
}

/* 等比宽高 */
.aspect-ratio {
  aspect-ratio: 1;
}