@use 'sass:map';

$breakpoints: (
  'phone': 320px,
  'landscapePhone': 576px,
  'tablet': 768px,
  'desktop': 1024px,
  'largeDesktop': 1200px,
  'xlDesktop': 1400px,
);

@mixin untilMediaType($type) {
  @media only screen and (max-width: map.get($breakpoints, $type)) {
    & {
      @content;
    }
  }
}