.space {
	padding-top: $standard-space;
	padding-bottom: $standard-space;
	&--md{
		padding-top: $standard-space / 1.1;
		padding-bottom: $standard-space / 1.1;
		}
	&--lg{
		padding-top: $standard-space *1.5;
		padding-bottom: $standard-space *1.5;
	}
	&--xl{
		padding-top: $standard-space *2.5;
		padding-bottom: $standard-space *2.5;

	}

}
.space-top {
	padding-top: $standard-space;
	&--md{
		padding-top: $standard-space / 1.1;
	}
	&--lg{
		padding-top: $standard-space *1.5;
	}
	&--xl{
		padding-top: $standard-space *2.5;
	}

}
.space-bottom {
	padding-bottom: $standard-space;
	&--md{
		padding-bottom: $standard-space / 1.1;
	}
	&--lg{
		padding-bottom: $standard-space *1.5;
	}
	&--xl{
		padding-bottom: $standard-space *2.5;
	}
}


@include mediaMax(lg){
	.space {
		padding-top: $standard-space /2;
		padding-bottom: $standard-space /2;
		&--md{
			padding-top: $standard-space /2;
			padding-bottom: $standard-space /2;
			}
		&--lg{
			padding-top: $standard-space /2;
			padding-bottom: $standard-space /2;
		}
		&--xl{
			padding-top: $standard-space /2;
			padding-bottom: $standard-space /2;
	
		}
		
	}
	.space-top {
		padding-top: $standard-space /2;
		&--md{
			padding-top: $standard-space /2;
		}
		&--lg{
			padding-top: $standard-space /2;
		}
		&--xl{
			padding-top: $standard-space /2;
		}
	
	}
	.space-bottom {
		padding-bottom: $standard-space /2;
		&--md{
			padding-bottom: $standard-space /2;
		}
		&--lg{
			padding-bottom: $standard-space /2;
		}
		&--xl{
			padding-bottom: $standard-space /1.5;
		}
		
	}
	
}
  
/**--------- START OF SPACING HELPER MIXINS --------*/
//NOTE: This mixin is here because we want to compile this scss just after the spacing helpers of above. 
// This .scss loop will create "margin helpers" and "padding helpers" for use in your web projects.
// It will generate several classes such as:
// .mr-10 which gives margin-right 10 pixels.
// .mr-15 gives MARGIN to the RIGHT 15 pixels.
// .mt-15 gives MARGIN to the TOP 15 pixels and so on.
// .pb-5 gives PADDING to the BOTTOM of 5 pixels
// .pl-40 gives PADDING to the LEFT of 40 pixels
// The first letter is "m" or "p" for MARGIN or PADDING
// Second letter is "t", "b", "l", or "r" for TOP, BOTTOM, LEFT, or RIGHT
// Third letter is the number of spacing in pixels. Adjust the amounts generated by editing the $spaceamounts variable below.

$spaceamounts: (10, 20, 30, 40, 50, 60, 70, 80, 90, 100); // Adjust this to include the pixel amounts you need.
$sides: (top, bottom, left, right); // Leave this variable alone
$sidesL: (left); // Leave this variable alone
$sidesR: (right); // Leave this variable alone
@each $space in $spaceamounts {
  @each $side in $sides {
    .m#{str-slice($side, 0, 1)}-#{$space} {
      margin-#{$side}: #{$space /$base-unit}rem;
    }
    .p#{str-slice($side, 0, 1)}-#{$space} {
      padding-#{$side}: #{$space /$base-unit}rem;
    }
  }

  // RTL
  @each $side in $sidesL {
    .rtl .m#{str-slice($side, 0, 1)}-#{$space} {
      margin-right: #{$space /$base-unit}rem;
      margin-left: auto;
    }
    .rtl .p#{str-slice($side, 0, 1)}-#{$space} {
      padding-right: #{$space /$base-unit}rem;
      padding-left: auto;
    }
  }
  @each $side in $sidesR {
    .rtl .m#{str-slice($side, 0, 1)}-#{$space} {
      margin-left: #{$space /$base-unit}rem;
      margin-right: auto;
    }
    .rtl .p#{str-slice($side, 0, 1)}-#{$space} {
      padding-left: #{$space /$base-unit}rem;
      padding-right: auto;
    }
  }
}

