//Breakpoints
//Default Mobile-portrait
$xxs: 30em; // 480px - xxs
$xs: 36em; // 576px - xs
$sm: 48em; // 768px - sm
$md: 64em; // 1024px - md
$lg: 85.375em; // 1366px - lg
$xl: 120em; // 1920px - xl
$xxl: 160em; // 2560px - xxl

@mixin xxs {
  @media screen and (min-width: #{$xxs}) {
    @content;
  }
}
@mixin xs {
  @media screen and (min-width: #{$xs}) {
    @content;
  }
}
@mixin sm {
  @media screen and (min-width: #{$sm}) {
    @content;
  }
}
@mixin md {
  @media screen and (min-width: #{$md}) {
    @content;
  }
}
@mixin lg {
  @media screen and (min-width: #{$lg}) {
    @content;
  }
}
@mixin xl {
  @media screen and (min-width: #{$xl}) {
    @content;
  }
}
@mixin xxl {
  @media screen and (min-width: #{$xxl}) {
    @content;
  }
}
