// Breakpoint variables
$breakpoint-mobile: 480px;
$breakpoint-tablet: 768px;
$breakpoint-desktop: 1024px;


// Breakpoint mixins for max-width
@mixin mobile {
  @media (max-width: #{$breakpoint-tablet - 1px}) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: #{$breakpoint-tablet}) and (max-width: #{$breakpoint-desktop - 1px}) {
    @content;
  }
}

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

// Example usage:
// .element {
//   @include mobile {
//     // Styles for mobile and up
//   }
//
//   @include tablet {
//     // Styles for tablet and up
//   }
//
//   @include desktop {
//     // Styles for desktop and up
//   }
// }