// Define breakpoints
$breakpoint-lg: 1600px;
$breakpoint-md: 922px;
$breakpoint-sm: 600px;
$breakpoint-xs: 320px;

// Mixin for large devices
@mixin responsive-lg {
  @media (max-width: #{$breakpoint-lg}) {
    @content;
  }
}

// Mixin for medium devices
@mixin responsive-md {
  @media (max-width: #{$breakpoint-md}) {
    @content;
  }
}

// Mixin for small devices
@mixin responsive-sm {
  @media (max-width: #{$breakpoint-sm}) {
    @content;
  }
}

// Mixin for extra small devices
@mixin responsive-xs {
  @media (max-width: #{$breakpoint-xs}) {
    @content;
  }
}