:root {
  --lg-min-width: 1440px;
  --md-max-width: 1439px;
  --md-min-width: 1024px;
  --sm-max-width: 1023px;
  --sm-min-width: 600px;
  --es-max-width: : 599px;

  --gs-content-max-width: 1440px;
  --app-max-width: 1560px;

  /* ES 599px under */
  --gs-columns: 6;
  --gs-margin: 20px;
  --gs-gutter: 12px;

  /* SM 600px ~ 1023px */
  @media (min-width: 600px) {
    --gs-columns: 12;
    --gs-margin: 36px;
    --gs-gutter: 16px;
  }

  /* MD 1024px ~ 1439px*/
  @media (min-width: 1024px) {
    --gs-columns: 12;
    --gs-margin: 40px;
    --gs-gutter: 16px;
  }

  /* LG 1440px up */
  @media (min-width: 1440px) {
    --gs-columns: 12;
    --gs-margin: 60px;
    --gs-gutter: 20px;
  }

  @media (min-width: 1560px) {
    --gs-margin: calc((100vw - var(--gs-content-max-width)) / 2);
  }

  /* 不含margin的content總寬度, 等同於12條columns或6條columns的寬度 */
  --gs-content-width: calc(100vw - var(--gs-margin) - var(--gs-margin));

  /* 每條column的寬度 */
  --gs-column: calc(
    (var(--gs-content-width) - ((var(--gs-columns) - 1) * var(--gs-gutter))) /
      var(--gs-columns)
  );
  --gs-column2: calc(var(--gs-column) * 2 + var(--gs-gutter));
  --gs-column3: calc(var(--gs-column) * 3 + var(--gs-gutter) * 2);
  --gs-column4: calc(var(--gs-column) * 4 + var(--gs-gutter) * 3);
  --gs-column5: calc(var(--gs-column) * 5 + var(--gs-gutter) * 4);
  --gs-column6: calc(var(--gs-column) * 6 + var(--gs-gutter) * 5);
  --gs-column7: calc(var(--gs-column) * 7 + var(--gs-gutter) * 6);
  --gs-column8: calc(var(--gs-column) * 8 + var(--gs-gutter) * 7);
  --gs-column9: calc(var(--gs-column) * 9 + var(--gs-gutter) * 8);
  --gs-column10: calc(var(--gs-column) * 10 + var(--gs-gutter) * 9);
  --gs-column11: calc(var(--gs-column) * 11 + var(--gs-gutter) * 10);
  /* --gs-column12 use --gs-content-width instead */

  .w-gsContentWidth {
    width: var(--gs-content-width);
  }
  .mx-gsMargin {
    margin-left: var(--gs-margin);
    margin-right: var(--gs-margin);
  }
  .px-gsMargin {
    padding-left: var(--gs-margin);
    padding-right: var(--gs-margin);
  }
  .px-basicPadding {
    padding-left: var(--gs-margin);
    padding-right: var(--gs-margin);
  }
  .pt-sectionContainerTop {
    padding-top: var(--Spacing-Section-Container-Top-default);
  }
  .pb-sectionNormalPadding {
    padding-bottom: var(--Spacing-Section-Normal-Sec-padding);
  }
  .pb-sectionFooterTopPadding {
    padding-bottom: var(--Spacing-Section-Footer-Top-padding);
  }
}