Generated by SassMeister.com.

browserslist

> 1%
last 2 versions

SassMeister-input.scss

// ----
// libsass (v3.5.4)
// ----

////
/// String to number converter
/// @author Hugo Giraudel
/// @access private
////


///
/// Casts a string into a number
///
/// @param {String | Number} $value - Value to be parsed
///
/// @return {Number}
///
@function to-number($value) {
  @if type-of($value) == 'number' {
    @return $value;
  } @else if type-of($value) != 'string' {
    $_: log('Value for `to-number` should be a number or a string.');
  }
  
  $result: 0;
  $digits: 0;
  $minus: str-slice($value, 1, 1) == '-';
  $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
  
  @for $i from if($minus, 2, 1) through str-length($value) {
    $character: str-slice($value, $i, $i);
    
    @if not (index(map-keys($numbers), $character) or $character == '.') {
      @return to-length(if($minus, -$result, $result), str-slice($value, $i))
    }
    
    @if $character == '.' {
      $digits: 1; 
    } @else if $digits == 0 {
      $result: $result * 10 + map-get($numbers, $character);  
    } @else {
      $digits: $digits * 10;
      $result: $result + map-get($numbers, $character) / $digits;
    }
  }
  
  @return if($minus, -$result, $result);;
}

// Spacing Utility
// @author Philip Zastrow
// Major Breakpoints
$bp-sm: 30rem;
$bp-md: 50rem;
$bp-lg: 70rem;
$bp-xl: 80rem;

// Only add Major Breakpoints to this list. This is map is used
// by the loop-mq mixin to auto generate media queary-related classes.
$grid-breakpoints: (
  sm: $bp-sm,
  md: $bp-md,
  lg: $bp-lg,
  xl: $bp-xl
);

@mixin loop-mq($print:null) {
  @content;
  @each $key, $val in $grid-breakpoints {
    @media (min-width: #{$val}) {
      &\@#{$key} {
        @content;
      }
    }
  }
}

$spacing-key: ("all", "top", "rgt", "lft", "btm", "vrt", "hrz" );

@mixin spacing-loop($prop, $space, $val) {
  // Test $prop value and alert
  @if $prop != "margin" {
    @if $prop != "padding" {
      @warn "$prop must be set as either `margin` or `padding`";
    }
  }

  // The spacing loop
  @each $key in $spacing-key {
    &-#{$key}-#{$space} {
      @include loop-mq(print) {
        @if $key == "all" {
          #{$prop}: $val;
        }
        @if $key == "top" {
          #{$prop}-top: $val;
        }
        @if $key == "rgt" {
          #{$prop}-right: $val;
        }
        @if $key == "btm" {
          #{$prop}-bottom: $val;
        }
        @if $key == "lft" {
          #{$prop}-left: $val;
        }
        @if $key == "vrt" {
          #{$prop}-top: $val;
          #{$prop}-bottom: $val;
        }
        @if $key == "hrz" {
          #{$prop}-right: $val;
          #{$prop}-left: $val;
        }
      }
    }
  }
}

@mixin spacing($space, $val) {
  .util-pad {
    @include spacing-loop("padding", $space, $val);
  }

  .util-margin {
    @include spacing-loop("margin", $space, $val);
  }
}

$smallSpaces: ('025', '050', '075');

@each $space in $smallSpaces {
  $val: number($space) / 100 + em;

  @include spacing($space, $val);
}

SassMeister-output.css

.util-pad-all-025 {
  padding: number("025")/100em;
}

@media (min-width: 30rem) {
  .util-pad-all-025\@sm {
    padding: number("025")/100em;
  }
}

@media (min-width: 50rem) {
  .util-pad-all-025\@md {
    padding: number("025")/100em;
  }
}

@media (min-width: 70rem) {
  .util-pad-all-025\@lg {
    padding: number("025")/100em;
  }
}

@media (min-width: 80rem) {
  .util-pad-all-025\@xl {
    padding: number("025")/100em;
  }
}

.util-pad-top-025 {
  padding-top: number("025")/100em;
}

@media (min-width: 30rem) {
  .util-pad-top-025\@sm {
    padding-top: number("025")/100em;
  }
}

@media (min-width: 50rem) {
  .util-pad-top-025\@md {
    padding-top: number("025")/100em;
  }
}

@media (min-width: 70rem) {
  .util-pad-top-025\@lg {
    padding-top: number("025")/100em;
  }
}

@media (min-width: 80rem) {
  .util-pad-top-025\@xl {
    padding-top: number("025")/100em;
  }
}

.util-pad-rgt-025 {
  padding-right: number("025")/100em;
}

@media (min-width: 30rem) {
  .util-pad-rgt-025\@sm {
    padding-right: number("025")/100em;
  }
}

@media (min-width: 50rem) {
  .util-pad-rgt-025\@md {
    padding-right: number("025")/100em;
  }
}

@media (min-width: 70rem) {
  .util-pad-rgt-025\@lg {
    padding-right: number("025")/100em;
  }
}

@media (min-width: 80rem) {
  .util-pad-rgt-025\@xl {
    padding-right: number("025")/100em;
  }
}

.util-pad-lft-025 {
  padding-left: number("025")/100em;
}

@media (min-width: 30rem) {
  .util-pad-lft-025\@sm {
    padding-left: number("025")/100em;
  }
}

@media (min-width: 50rem) {
  .util-pad-lft-025\@md {
    padding-left: number("025")/100em;
  }
}

@media (min-width: 70rem) {
  .util-pad-lft-025\@lg {
    padding-left: number("025")/100em;
  }
}

@media (min-width: 80rem) {
  .util-pad-lft-025\@xl {
    padding-left: number("025")/100em;
  }
}

.util-pad-btm-025 {
  padding-bottom: number("025")/100em;
}

@media (min-width: 30rem) {
  .util-pad-btm-025\@sm {
    padding-bottom: number("025")/100em;
  }
}

@media (min-width: 50rem) {
  .util-pad-btm-025\@md {
    padding-bottom: number("025")/100em;
  }
}

@media (min-width: 70rem) {
  .util-pad-btm-025\@lg {
    padding-bottom: number("025")/100em;
  }
}

@media (min-width: 80rem) {
  .util-pad-btm-025\@xl {
    padding-bottom: number("025")/100em;
  }
}

.util-pad-vrt-025 {
  padding-top: number("025")/100em;
  padding-bottom: number("025")/100em;
}

@media (min-width: 30rem) {
  .util-pad-vrt-025\@sm {
    padding-top: number("025")/100em;
    padding-bottom: number("025")/100em;
  }
}

@media (min-width: 50rem) {
  .util-pad-vrt-025\@md {
    padding-top: number("025")/100em;
    padding-bottom: number("025")/100em;
  }
}

@media (min-width: 70rem) {
  .util-pad-vrt-025\@lg {
    padding-top: number("025")/100em;
    padding-bottom: number("025")/100em;
  }
}

@media (min-width: 80rem) {
  .util-pad-vrt-025\@xl {
    padding-top: number("025")/100em;
    padding-bottom: number("025")/100em;
  }
}

.util-pad-hrz-025 {
  padding-right: number("025")/100em;
  padding-left: number("025")/100em;
}

@media (min-width: 30rem) {
  .util-pad-hrz-025\@sm {
    padding-right: number("025")/100em;
    padding-left: number("025")/100em;
  }
}

@media (min-width: 50rem) {
  .util-pad-hrz-025\@md {
    padding-right: number("025")/100em;
    padding-left: number("025")/100em;
  }
}

@media (min-width: 70rem) {
  .util-pad-hrz-025\@lg {
    padding-right: number("025")/100em;
    padding-left: number("025")/100em;
  }
}

@media (min-width: 80rem) {
  .util-pad-hrz-025\@xl {
    padding-right: number("025")/100em;
    padding-left: number("025")/100em;
  }
}

.util-margin-all-025 {
  margin: number("025")/100em;
}

@media (min-width: 30rem) {
  .util-margin-all-025\@sm {
    margin: number("025")/100em;
  }
}

@media (min-width: 50rem) {
  .util-margin-all-025\@md {
    margin: number("025")/100em;
  }
}

@media (min-width: 70rem) {
  .util-margin-all-025\@lg {
    margin: number("025")/100em;
  }
}

@media (min-width: 80rem) {
  .util-margin-all-025\@xl {
    margin: number("025")/100em;
  }
}

.util-margin-top-025 {
  margin-top: number("025")/100em;
}

@media (min-width: 30rem) {
  .util-margin-top-025\@sm {
    margin-top: number("025")/100em;
  }
}

@media (min-width: 50rem) {
  .util-margin-top-025\@md {
    margin-top: number("025")/100em;
  }
}

@media (min-width: 70rem) {
  .util-margin-top-025\@lg {
    margin-top: number("025")/100em;
  }
}

@media (min-width: 80rem) {
  .util-margin-top-025\@xl {
    margin-top: number("025")/100em;
  }
}

.util-margin-rgt-025 {
  margin-right: number("025")/100em;
}

@media (min-width: 30rem) {
  .util-margin-rgt-025\@sm {
    margin-right: number("025")/100em;
  }
}

@media (min-width: 50rem) {
  .util-margin-rgt-025\@md {
    margin-right: number("025")/100em;
  }
}

@media (min-width: 70rem) {
  .util-margin-rgt-025\@lg {
    margin-right: number("025")/100em;
  }
}

@media (min-width: 80rem) {
  .util-margin-rgt-025\@xl {
    margin-right: number("025")/100em;
  }
}

.util-margin-lft-025 {
  margin-left: number("025")/100em;
}

@media (min-width: 30rem) {
  .util-margin-lft-025\@sm {
    margin-left: number("025")/100em;
  }
}

@media (min-width: 50rem) {
  .util-margin-lft-025\@md {
    margin-left: number("025")/100em;
  }
}

@media (min-width: 70rem) {
  .util-margin-lft-025\@lg {
    margin-left: number("025")/100em;
  }
}

@media (min-width: 80rem) {
  .util-margin-lft-025\@xl {
    margin-left: number("025")/100em;
  }
}

.util-margin-btm-025 {
  margin-bottom: number("025")/100em;
}

@media (min-width: 30rem) {
  .util-margin-btm-025\@sm {
    margin-bottom: number("025")/100em;
  }
}

@media (min-width: 50rem) {
  .util-margin-btm-025\@md {
    margin-bottom: number("025")/100em;
  }
}

@media (min-width: 70rem) {
  .util-margin-btm-025\@lg {
    margin-bottom: number("025")/100em;
  }
}

@media (min-width: 80rem) {
  .util-margin-btm-025\@xl {
    margin-bottom: number("025")/100em;
  }
}

.util-margin-vrt-025 {
  margin-top: number("025")/100em;
  margin-bottom: number("025")/100em;
}

@media (min-width: 30rem) {
  .util-margin-vrt-025\@sm {
    margin-top: number("025")/100em;
    margin-bottom: number("025")/100em;
  }
}

@media (min-width: 50rem) {
  .util-margin-vrt-025\@md {
    margin-top: number("025")/100em;
    margin-bottom: number("025")/100em;
  }
}

@media (min-width: 70rem) {
  .util-margin-vrt-025\@lg {
    margin-top: number("025")/100em;
    margin-bottom: number("025")/100em;
  }
}

@media (min-width: 80rem) {
  .util-margin-vrt-025\@xl {
    margin-top: number("025")/100em;
    margin-bottom: number("025")/100em;
  }
}

.util-margin-hrz-025 {
  margin-right: number("025")/100em;
  margin-left: number("025")/100em;
}

@media (min-width: 30rem) {
  .util-margin-hrz-025\@sm {
    margin-right: number("025")/100em;
    margin-left: number("025")/100em;
  }
}

@media (min-width: 50rem) {
  .util-margin-hrz-025\@md {
    margin-right: number("025")/100em;
    margin-left: number("025")/100em;
  }
}

@media (min-width: 70rem) {
  .util-margin-hrz-025\@lg {
    margin-right: number("025")/100em;
    margin-left: number("025")/100em;
  }
}

@media (min-width: 80rem) {
  .util-margin-hrz-025\@xl {
    margin-right: number("025")/100em;
    margin-left: number("025")/100em;
  }
}

.util-pad-all-050 {
  padding: number("050")/100em;
}

@media (min-width: 30rem) {
  .util-pad-all-050\@sm {
    padding: number("050")/100em;
  }
}

@media (min-width: 50rem) {
  .util-pad-all-050\@md {
    padding: number("050")/100em;
  }
}

@media (min-width: 70rem) {
  .util-pad-all-050\@lg {
    padding: number("050")/100em;
  }
}

@media (min-width: 80rem) {
  .util-pad-all-050\@xl {
    padding: number("050")/100em;
  }
}

.util-pad-top-050 {
  padding-top: number("050")/100em;
}

@media (min-width: 30rem) {
  .util-pad-top-050\@sm {
    padding-top: number("050")/100em;
  }
}

@media (min-width: 50rem) {
  .util-pad-top-050\@md {
    padding-top: number("050")/100em;
  }
}

@media (min-width: 70rem) {
  .util-pad-top-050\@lg {
    padding-top: number("050")/100em;
  }
}

@media (min-width: 80rem) {
  .util-pad-top-050\@xl {
    padding-top: number("050")/100em;
  }
}

.util-pad-rgt-050 {
  padding-right: number("050")/100em;
}

@media (min-width: 30rem) {
  .util-pad-rgt-050\@sm {
    padding-right: number("050")/100em;
  }
}

@media (min-width: 50rem) {
  .util-pad-rgt-050\@md {
    padding-right: number("050")/100em;
  }
}

@media (min-width: 70rem) {
  .util-pad-rgt-050\@lg {
    padding-right: number("050")/100em;
  }
}

@media (min-width: 80rem) {
  .util-pad-rgt-050\@xl {
    padding-right: number("050")/100em;
  }
}

.util-pad-lft-050 {
  padding-left: number("050")/100em;
}

@media (min-width: 30rem) {
  .util-pad-lft-050\@sm {
    padding-left: number("050")/100em;
  }
}

@media (min-width: 50rem) {
  .util-pad-lft-050\@md {
    padding-left: number("050")/100em;
  }
}

@media (min-width: 70rem) {
  .util-pad-lft-050\@lg {
    padding-left: number("050")/100em;
  }
}

@media (min-width: 80rem) {
  .util-pad-lft-050\@xl {
    padding-left: number("050")/100em;
  }
}

.util-pad-btm-050 {
  padding-bottom: number("050")/100em;
}

@media (min-width: 30rem) {
  .util-pad-btm-050\@sm {
    padding-bottom: number("050")/100em;
  }
}

@media (min-width: 50rem) {
  .util-pad-btm-050\@md {
    padding-bottom: number("050")/100em;
  }
}

@media (min-width: 70rem) {
  .util-pad-btm-050\@lg {
    padding-bottom: number("050")/100em;
  }
}

@media (min-width: 80rem) {
  .util-pad-btm-050\@xl {
    padding-bottom: number("050")/100em;
  }
}

.util-pad-vrt-050 {
  padding-top: number("050")/100em;
  padding-bottom: number("050")/100em;
}

@media (min-width: 30rem) {
  .util-pad-vrt-050\@sm {
    padding-top: number("050")/100em;
    padding-bottom: number("050")/100em;
  }
}

@media (min-width: 50rem) {
  .util-pad-vrt-050\@md {
    padding-top: number("050")/100em;
    padding-bottom: number("050")/100em;
  }
}

@media (min-width: 70rem) {
  .util-pad-vrt-050\@lg {
    padding-top: number("050")/100em;
    padding-bottom: number("050")/100em;
  }
}

@media (min-width: 80rem) {
  .util-pad-vrt-050\@xl {
    padding-top: number("050")/100em;
    padding-bottom: number("050")/100em;
  }
}

.util-pad-hrz-050 {
  padding-right: number("050")/100em;
  padding-left: number("050")/100em;
}

@media (min-width: 30rem) {
  .util-pad-hrz-050\@sm {
    padding-right: number("050")/100em;
    padding-left: number("050")/100em;
  }
}

@media (min-width: 50rem) {
  .util-pad-hrz-050\@md {
    padding-right: number("050")/100em;
    padding-left: number("050")/100em;
  }
}

@media (min-width: 70rem) {
  .util-pad-hrz-050\@lg {
    padding-right: number("050")/100em;
    padding-left: number("050")/100em;
  }
}

@media (min-width: 80rem) {
  .util-pad-hrz-050\@xl {
    padding-right: number("050")/100em;
    padding-left: number("050")/100em;
  }
}

.util-margin-all-050 {
  margin: number("050")/100em;
}

@media (min-width: 30rem) {
  .util-margin-all-050\@sm {
    margin: number("050")/100em;
  }
}

@media (min-width: 50rem) {
  .util-margin-all-050\@md {
    margin: number("050")/100em;
  }
}

@media (min-width: 70rem) {
  .util-margin-all-050\@lg {
    margin: number("050")/100em;
  }
}

@media (min-width: 80rem) {
  .util-margin-all-050\@xl {
    margin: number("050")/100em;
  }
}

.util-margin-top-050 {
  margin-top: number("050")/100em;
}

@media (min-width: 30rem) {
  .util-margin-top-050\@sm {
    margin-top: number("050")/100em;
  }
}

@media (min-width: 50rem) {
  .util-margin-top-050\@md {
    margin-top: number("050")/100em;
  }
}

@media (min-width: 70rem) {
  .util-margin-top-050\@lg {
    margin-top: number("050")/100em;
  }
}

@media (min-width: 80rem) {
  .util-margin-top-050\@xl {
    margin-top: number("050")/100em;
  }
}

.util-margin-rgt-050 {
  margin-right: number("050")/100em;
}

@media (min-width: 30rem) {
  .util-margin-rgt-050\@sm {
    margin-right: number("050")/100em;
  }
}

@media (min-width: 50rem) {
  .util-margin-rgt-050\@md {
    margin-right: number("050")/100em;
  }
}

@media (min-width: 70rem) {
  .util-margin-rgt-050\@lg {
    margin-right: number("050")/100em;
  }
}

@media (min-width: 80rem) {
  .util-margin-rgt-050\@xl {
    margin-right: number("050")/100em;
  }
}

.util-margin-lft-050 {
  margin-left: number("050")/100em;
}

@media (min-width: 30rem) {
  .util-margin-lft-050\@sm {
    margin-left: number("050")/100em;
  }
}

@media (min-width: 50rem) {
  .util-margin-lft-050\@md {
    margin-left: number("050")/100em;
  }
}

@media (min-width: 70rem) {
  .util-margin-lft-050\@lg {
    margin-left: number("050")/100em;
  }
}

@media (min-width: 80rem) {
  .util-margin-lft-050\@xl {
    margin-left: number("050")/100em;
  }
}

.util-margin-btm-050 {
  margin-bottom: number("050")/100em;
}

@media (min-width: 30rem) {
  .util-margin-btm-050\@sm {
    margin-bottom: number("050")/100em;
  }
}

@media (min-width: 50rem) {
  .util-margin-btm-050\@md {
    margin-bottom: number("050")/100em;
  }
}

@media (min-width: 70rem) {
  .util-margin-btm-050\@lg {
    margin-bottom: number("050")/100em;
  }
}

@media (min-width: 80rem) {
  .util-margin-btm-050\@xl {
    margin-bottom: number("050")/100em;
  }
}

.util-margin-vrt-050 {
  margin-top: number("050")/100em;
  margin-bottom: number("050")/100em;
}

@media (min-width: 30rem) {
  .util-margin-vrt-050\@sm {
    margin-top: number("050")/100em;
    margin-bottom: number("050")/100em;
  }
}

@media (min-width: 50rem) {
  .util-margin-vrt-050\@md {
    margin-top: number("050")/100em;
    margin-bottom: number("050")/100em;
  }
}

@media (min-width: 70rem) {
  .util-margin-vrt-050\@lg {
    margin-top: number("050")/100em;
    margin-bottom: number("050")/100em;
  }
}

@media (min-width: 80rem) {
  .util-margin-vrt-050\@xl {
    margin-top: number("050")/100em;
    margin-bottom: number("050")/100em;
  }
}

.util-margin-hrz-050 {
  margin-right: number("050")/100em;
  margin-left: number("050")/100em;
}

@media (min-width: 30rem) {
  .util-margin-hrz-050\@sm {
    margin-right: number("050")/100em;
    margin-left: number("050")/100em;
  }
}

@media (min-width: 50rem) {
  .util-margin-hrz-050\@md {
    margin-right: number("050")/100em;
    margin-left: number("050")/100em;
  }
}

@media (min-width: 70rem) {
  .util-margin-hrz-050\@lg {
    margin-right: number("050")/100em;
    margin-left: number("050")/100em;
  }
}

@media (min-width: 80rem) {
  .util-margin-hrz-050\@xl {
    margin-right: number("050")/100em;
    margin-left: number("050")/100em;
  }
}

.util-pad-all-075 {
  padding: number("075")/100em;
}

@media (min-width: 30rem) {
  .util-pad-all-075\@sm {
    padding: number("075")/100em;
  }
}

@media (min-width: 50rem) {
  .util-pad-all-075\@md {
    padding: number("075")/100em;
  }
}

@media (min-width: 70rem) {
  .util-pad-all-075\@lg {
    padding: number("075")/100em;
  }
}

@media (min-width: 80rem) {
  .util-pad-all-075\@xl {
    padding: number("075")/100em;
  }
}

.util-pad-top-075 {
  padding-top: number("075")/100em;
}

@media (min-width: 30rem) {
  .util-pad-top-075\@sm {
    padding-top: number("075")/100em;
  }
}

@media (min-width: 50rem) {
  .util-pad-top-075\@md {
    padding-top: number("075")/100em;
  }
}

@media (min-width: 70rem) {
  .util-pad-top-075\@lg {
    padding-top: number("075")/100em;
  }
}

@media (min-width: 80rem) {
  .util-pad-top-075\@xl {
    padding-top: number("075")/100em;
  }
}

.util-pad-rgt-075 {
  padding-right: number("075")/100em;
}

@media (min-width: 30rem) {
  .util-pad-rgt-075\@sm {
    padding-right: number("075")/100em;
  }
}

@media (min-width: 50rem) {
  .util-pad-rgt-075\@md {
    padding-right: number("075")/100em;
  }
}

@media (min-width: 70rem) {
  .util-pad-rgt-075\@lg {
    padding-right: number("075")/100em;
  }
}

@media (min-width: 80rem) {
  .util-pad-rgt-075\@xl {
    padding-right: number("075")/100em;
  }
}

.util-pad-lft-075 {
  padding-left: number("075")/100em;
}

@media (min-width: 30rem) {
  .util-pad-lft-075\@sm {
    padding-left: number("075")/100em;
  }
}

@media (min-width: 50rem) {
  .util-pad-lft-075\@md {
    padding-left: number("075")/100em;
  }
}

@media (min-width: 70rem) {
  .util-pad-lft-075\@lg {
    padding-left: number("075")/100em;
  }
}

@media (min-width: 80rem) {
  .util-pad-lft-075\@xl {
    padding-left: number("075")/100em;
  }
}

.util-pad-btm-075 {
  padding-bottom: number("075")/100em;
}

@media (min-width: 30rem) {
  .util-pad-btm-075\@sm {
    padding-bottom: number("075")/100em;
  }
}

@media (min-width: 50rem) {
  .util-pad-btm-075\@md {
    padding-bottom: number("075")/100em;
  }
}

@media (min-width: 70rem) {
  .util-pad-btm-075\@lg {
    padding-bottom: number("075")/100em;
  }
}

@media (min-width: 80rem) {
  .util-pad-btm-075\@xl {
    padding-bottom: number("075")/100em;
  }
}

.util-pad-vrt-075 {
  padding-top: number("075")/100em;
  padding-bottom: number("075")/100em;
}

@media (min-width: 30rem) {
  .util-pad-vrt-075\@sm {
    padding-top: number("075")/100em;
    padding-bottom: number("075")/100em;
  }
}

@media (min-width: 50rem) {
  .util-pad-vrt-075\@md {
    padding-top: number("075")/100em;
    padding-bottom: number("075")/100em;
  }
}

@media (min-width: 70rem) {
  .util-pad-vrt-075\@lg {
    padding-top: number("075")/100em;
    padding-bottom: number("075")/100em;
  }
}

@media (min-width: 80rem) {
  .util-pad-vrt-075\@xl {
    padding-top: number("075")/100em;
    padding-bottom: number("075")/100em;
  }
}

.util-pad-hrz-075 {
  padding-right: number("075")/100em;
  padding-left: number("075")/100em;
}

@media (min-width: 30rem) {
  .util-pad-hrz-075\@sm {
    padding-right: number("075")/100em;
    padding-left: number("075")/100em;
  }
}

@media (min-width: 50rem) {
  .util-pad-hrz-075\@md {
    padding-right: number("075")/100em;
    padding-left: number("075")/100em;
  }
}

@media (min-width: 70rem) {
  .util-pad-hrz-075\@lg {
    padding-right: number("075")/100em;
    padding-left: number("075")/100em;
  }
}

@media (min-width: 80rem) {
  .util-pad-hrz-075\@xl {
    padding-right: number("075")/100em;
    padding-left: number("075")/100em;
  }
}

.util-margin-all-075 {
  margin: number("075")/100em;
}

@media (min-width: 30rem) {
  .util-margin-all-075\@sm {
    margin: number("075")/100em;
  }
}

@media (min-width: 50rem) {
  .util-margin-all-075\@md {
    margin: number("075")/100em;
  }
}

@media (min-width: 70rem) {
  .util-margin-all-075\@lg {
    margin: number("075")/100em;
  }
}

@media (min-width: 80rem) {
  .util-margin-all-075\@xl {
    margin: number("075")/100em;
  }
}

.util-margin-top-075 {
  margin-top: number("075")/100em;
}

@media (min-width: 30rem) {
  .util-margin-top-075\@sm {
    margin-top: number("075")/100em;
  }
}

@media (min-width: 50rem) {
  .util-margin-top-075\@md {
    margin-top: number("075")/100em;
  }
}

@media (min-width: 70rem) {
  .util-margin-top-075\@lg {
    margin-top: number("075")/100em;
  }
}

@media (min-width: 80rem) {
  .util-margin-top-075\@xl {
    margin-top: number("075")/100em;
  }
}

.util-margin-rgt-075 {
  margin-right: number("075")/100em;
}

@media (min-width: 30rem) {
  .util-margin-rgt-075\@sm {
    margin-right: number("075")/100em;
  }
}

@media (min-width: 50rem) {
  .util-margin-rgt-075\@md {
    margin-right: number("075")/100em;
  }
}

@media (min-width: 70rem) {
  .util-margin-rgt-075\@lg {
    margin-right: number("075")/100em;
  }
}

@media (min-width: 80rem) {
  .util-margin-rgt-075\@xl {
    margin-right: number("075")/100em;
  }
}

.util-margin-lft-075 {
  margin-left: number("075")/100em;
}

@media (min-width: 30rem) {
  .util-margin-lft-075\@sm {
    margin-left: number("075")/100em;
  }
}

@media (min-width: 50rem) {
  .util-margin-lft-075\@md {
    margin-left: number("075")/100em;
  }
}

@media (min-width: 70rem) {
  .util-margin-lft-075\@lg {
    margin-left: number("075")/100em;
  }
}

@media (min-width: 80rem) {
  .util-margin-lft-075\@xl {
    margin-left: number("075")/100em;
  }
}

.util-margin-btm-075 {
  margin-bottom: number("075")/100em;
}

@media (min-width: 30rem) {
  .util-margin-btm-075\@sm {
    margin-bottom: number("075")/100em;
  }
}

@media (min-width: 50rem) {
  .util-margin-btm-075\@md {
    margin-bottom: number("075")/100em;
  }
}

@media (min-width: 70rem) {
  .util-margin-btm-075\@lg {
    margin-bottom: number("075")/100em;
  }
}

@media (min-width: 80rem) {
  .util-margin-btm-075\@xl {
    margin-bottom: number("075")/100em;
  }
}

.util-margin-vrt-075 {
  margin-top: number("075")/100em;
  margin-bottom: number("075")/100em;
}

@media (min-width: 30rem) {
  .util-margin-vrt-075\@sm {
    margin-top: number("075")/100em;
    margin-bottom: number("075")/100em;
  }
}

@media (min-width: 50rem) {
  .util-margin-vrt-075\@md {
    margin-top: number("075")/100em;
    margin-bottom: number("075")/100em;
  }
}

@media (min-width: 70rem) {
  .util-margin-vrt-075\@lg {
    margin-top: number("075")/100em;
    margin-bottom: number("075")/100em;
  }
}

@media (min-width: 80rem) {
  .util-margin-vrt-075\@xl {
    margin-top: number("075")/100em;
    margin-bottom: number("075")/100em;
  }
}

.util-margin-hrz-075 {
  margin-right: number("075")/100em;
  margin-left: number("075")/100em;
}

@media (min-width: 30rem) {
  .util-margin-hrz-075\@sm {
    margin-right: number("075")/100em;
    margin-left: number("075")/100em;
  }
}

@media (min-width: 50rem) {
  .util-margin-hrz-075\@md {
    margin-right: number("075")/100em;
    margin-left: number("075")/100em;
  }
}

@media (min-width: 70rem) {
  .util-margin-hrz-075\@lg {
    margin-right: number("075")/100em;
    margin-left: number("075")/100em;
  }
}

@media (min-width: 80rem) {
  .util-margin-hrz-075\@xl {
    margin-right: number("075")/100em;
    margin-left: number("075")/100em;
  }
}