:root {
  //container
  --container-max-width: 56.75rem;
  --section-padding-top: var(--spacer-2xl);
  --section-padding-bottom: var(--spacer-2xl);
  @include for-desktop {
    --container-max-width: 46.75rem;
    --section-padding-top: var(--spacer-2xl);
    --section-padding-bottom: var(--spacer-2xl);
  }
  @include for-desktop-l {
    --container-max-width: 56.75rem;
    --section-padding-top: var(--spacer-3xl);
    --section-padding-bottom: var(--spacer-3xl);
  }
  --container-margin-left: calc(
          (100% - var(--container-max-width)) / 2);

  //Spacer
  --spacer-2xs: 0.25rem; // 4px
  --spacer-xs: 0.5rem; // 8px
  --spacer-sm: 1rem; // 16px
  --spacer-base: 1.5rem; // 24px
  --spacer-lg: 2rem; // 32px
  --spacer-xl: 2.5rem; // 40px
  --spacer-2xl: 3.3333333rem; // 80px
  --spacer-3xl: 6.6666666rem; // 160px
  --spacer-4xl: 18rem; // 160px
}