@mixin size($width, $height: $width) {
  width: $width#{'px !important'};
  height: $height#{'px !important'};
}

@mixin margins {
  @each $space-name,$space-value in $spaces {
    .m-#{$space-name} {margin:#{$space-value}#{'px !important'}};
    .mt-#{$space-name} {margin-top:#{$space-value}#{'px !important'}};
    .mr-#{$space-name} {margin-right:#{$space-value}#{'px !important'}};
    .mb-#{$space-name} {margin-bottom:#{$space-value}#{'px !important'}};
    .ml-#{$space-name} {margin-left:#{$space-value}#{'px !important'}};
  }
}
@mixin paddings {
  @each $space-name,$space-value in $spaces {
    .p-#{$space-name} {padding:#{$space-value}#{'px !important'}};
    .pt-#{$space-name} {padding-top:#{$space-value}#{'px !important'}};
    .pr-#{$space-name} {padding-right:#{$space-value}#{'px !important'}};
    .pb-#{$space-name} {padding-bottom:#{$space-value}#{'px !important'}};
    .pl-#{$space-name} {padding-left:#{$space-value}#{'px !important'}};
  }
};


$breakpoints: (
        'mobile':  (max-width:  767px ),
        'tabletp': ((min-width:  768px) and (max-width: 1023px) ),
        'tabletl': ((min-width:  1024px) and (max-width: 1999px) ),
        'desktop':  (min-width: 1200px ),
) !default;

@mixin respond-to($breakpoint) {
  // If the key exists in the map
  @if map-has-key($breakpoints, $breakpoint) {
    // Prints a media query based on the value
    @media #{inspect(map-get($breakpoints, $breakpoint))} {//
      @content;
    }
  }

    // If the key doesn't exist in the map
  @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Available breakpoints are: #{map-keys($breakpoints)}.";
  }
}

@mixin prefix($declarations) {
  $prefixes: (webkit,moz,o,ms);
  @each $property, $value in $declarations {
    @each $prefix in $prefixes {
      #{'-' + $prefix + '-' + $property}: $value;
    }
    // Output standard non-prefixed declaration
    #{$property}: $value;
  }
}

@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}