/** min-width: 100px **/
@mixin media-x-small {
    @media (min-width: $x-small) {
      @content;
    }
  }
  
  /** min-width: 375px */
  @mixin media-small {
      @media (min-width: $small) {
        @content;
      }
    }
     
    /** min-width: 769px */
    @mixin media-medium {
      @media (min-width: $medium) {
        @content;
      }
    }
  
    /** max-width: 768px */
    @mixin media-medium-max {
      @media (max-width: $medium-max) {
        @content;
      }
    }
     /** max-width: 320px */
     @mixin media-small-max {
      @media (max-width: $small-max) {
        @content;
      }
    }
      /** min-width: 768px */
      @mixin media-tablet {
        @media (min-width: $tablet) {
          @content;
        }
      }
     
    /** min-width: 1024 */
    @mixin media-large {
      @media (min-width: $large) {
        @content;
      }
    }
  
    /** min-width: 1320 */
    @mixin media-x-large {
      @media (min-width: $xlarge) {
        @content;
      }
    }
  
    @mixin media-only-small {
      @media (max-width: $tablet) {
        @content;
      }
    }
  
  
  