// CSS-переменные для пресетов отступов, зависят от контекста браузера
:root {
  @media screen and (min-width: $screen-xl-min) and (min-height: $screen-xl-height-min) {
      --spacer-medium:              #{$spacer-6};
      --spacer-large:               #{$spacer-8};
      --spacer-xlarge:              #{$spacer-10};
      --spacer-xxlarge:             #{$spacer-18};
  }
  
  // Fallback отступов для IE, W: < 1440 || H: < 700
  --spacer-xsmall:                  #{$spacer-2};
  --spacer-small:                   #{$spacer-4};
  --spacer-medium:                  #{$spacer-5};
  --spacer-large:                   #{$spacer-6};
  --spacer-xlarge:                  #{$spacer-8};
  --spacer-xxlarge:                 #{$spacer-15};

  @media screen and (max-width: $screen-md-max) {
      --spacer-small:               #{$spacer-3};
      --spacer-medium:              #{$spacer-4};
      --spacer-large:               #{$spacer-5};
      --spacer-xlarge:              #{$spacer-7};
      --spacer-xxlarge:             #{$spacer-12};
  }
  
  @media screen and (max-width: $screen-sm-max) {
      --spacer-xsmall:              #{$spacer-1};
      --spacer-small:               #{$spacer-2};
      --spacer-medium:              #{$spacer-3};
      --spacer-large:               #{$spacer-4};
      --spacer-xlarge:              #{$spacer-6};
      --spacer-xxlarge:             #{$spacer-10};
  }
  
  @media screen and (max-width: $screen-xs-max) {
      --spacer-xlarge:              #{$spacer-5};
      --spacer-xxlarge:             #{$spacer-8};
  }
}