// Extra large devices (large desktops, 1200px and up)
@mixin xl {
  @media (max-width: 1600px) {
    @content;
  }
}

// large devices (large desktops, 1200px and up)
@mixin l {
  @media (max-width: 1200px) {
    @content;
  }
}

// Large devices (desktops, 960px and up)
@mixin m {
  @media (max-width: 960px) {
    @content;
  }
}

// Medium devices (tablets, 640px and up)
@mixin s {
  @media (max-width: 640px) {
    @content;
  }
}