Создать адаптивний миксин #adaptive

22.css

@media(min-width:576px) {
.container {
    max-width: 100%;
	padding-left:0.75rem;
	padding-right:0.75rem;
}
}




@media(min-width:576px) {
.container {
    max-width: 540px;
	padding-left:0.75rem;
	padding-right:0.75rem;
}
}



@media(min-width:768px) {
.container {
    max-width: 720px;
	padding-left:0.75rem;
	padding-right:0.75rem;
}
}




@media(min-width:992px) {
.container {
    max-width: 960px;
	padding-left:0.75rem;
	padding-right:0.75rem;
}
}





@media(min-width:1200px) {
.container {
    max-width: 1140px;
	padding-left:0.75rem;
	padding-right:0.75rem;
}
}

@media(min-width:1400px) {
.container {
    max-width: 1320px;
	padding-left:0.75rem;
	padding-right:0.75rem;
}
}

header.scss

html {
font-size:10px;
  font-size: 62.5%;      // 10 px
  @include respond(tab-land) {
  font-size:56.25%;      //  9px
  }
  
  body{
  font-size:1.6rem;
   letter-apacing:.2rem;
  padding:5rem;
  }
  
  @include respond(tab-port) {
  font-size:50%;
  }
  
  @include respond(phone) {
  font-size:30%;
  }
  
  @include respond(big-land) {
  font-size:75%;
  }
  
}

mixins.scss

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

style.scss

@mixin respond($breakpoint) {
  @if( $breakpoint == phone ) {
    @media only screen and (max-width:600) {
     @content;
    }
  } 

    @if( $breakpoint == tab-port ) {
    @media only screen and (max-width:900) {
     @content;
    }
  } 
  
    @if( $breakpoint == tab-land ) {
    @media only screen and (max-width:1200) {
     @content;
    }
  } 
 
      @if( $breakpoint == big-land ) { // экран больше 1800 пикселей
    @media only screen and (min-width:1800) {
     @content;
    }
  } 
  
}