// Breakpoints

@mixin bp-xl {
    @media only screen and (min-width: 1440px){
       @content;
   }
}
@mixin bp-l {
    @media only screen and (max-width: 1024px){
       @content;
   }
}
@mixin bp-m {
    @media only screen and (max-width: 840px){
       @content;
   }
}
@mixin bp-s {
    @media only screen and (max-width: 480px){
       @content;
   }
}

// EXAMPLE
// @include bp-m {
//     width: 10%;
// }