@mixin xs-smartphone {
  @media (min-width: #{$xs}) and (max-width: #{$--sm - 1px}) {
    @content;
  }
}
@mixin smartphone {
  @media (max-width: #{$--md - 1px}) {
    @content;
  }
}
@mixin tablet {
  @media (max-width: #{$--lg - 1px}) {
    @content;
  }
}

@mixin laptop {
  @media (max-width: #{$--xl - 1px}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$--xl}) {
    @content;
  }
}
