// _mixins.scss

@mixin respond-to($breakpoint) {
  @if $breakpoint == 'seventeen_hundread' {
    @media (max-width: 1700px) { @content; }
  } @else if $breakpoint == 'xlarge' {
    @media (max-width: 1500px) { @content; }
  } @else if $breakpoint == 'large' {
    @media (max-width: 1200px) { @content; }
  } @else if $breakpoint == 'medium' {
    @media (max-width: 992px) { @content; }
  } @else if $breakpoint == 'small' {
    @media (max-width: 768px) { @content; }
  } @else if $breakpoint == 'xsmall' {
    @media (max-width: 576px) { @content; }
  }@else if $breakpoint == 'four_hundread'{
    @media (max-width: 450px) { @content; }
  }@else if $breakpoint == 'mobile'{
    @media (max-width: 300px) { @content; }
  }
}